Geek asks and answers

How to place a place sign and search icon in the search input center in jQuery mobile 1.4.0?

In jQuery mobile app, I need to put the search icon and the placement of the search field in the center, I tried the following code, but it did not work, the placeholder and icon still appear on the left on Android devices. Please help me. How can I place SearchIcon and Placeholder in the center of the search input field?

<input type="search" id="SearchFilter"  placeholder="Search.." />

 <ul data-role="listview"   data-filter="true"  data-input="#SearchFilter"
    data-split-icon="delete"> 
   // All Elements 
</ul>

CSS

::-webkit-input-placeholder { // its working on jsfiddle but it didnt work on mobile devices

    color: grey; 
    text-align:center;

}
#SearchFilter{

   text-shadow:none; 
   text-align:center;
}


.ui-icon-SearchIcon:after{

   background-image: url(icons/searchIcon.png);
   background-size: 100% 100%;
   background-position: 0 50%;
   width:32px;
   height:32px;
   text-align:center;
   float:center;    
 }
+3
source share
2 answers

Insert a placeholder text in the middle:

Do you also want to print the text in the middle?

If yes:

.ui-input-search input{
    text-align: center;
}

Demo

If No:

::-webkit-input-placeholder {
   text-align:center;
}
:-moz-placeholder { /* Firefox 18- */
   text-align:center;  
}
::-moz-placeholder {  /* Firefox 19+ */
   text-align:center;  
}
:-ms-input-placeholder {  
   text-align:center; 
}

Demo

You can put the icon in the center if you want, however it does not disappear as you type, so I think that doesn't make sense. But if you like:

.ui-input-search:after{
   width:18px;
   height:18px;
   left: 50%;
   margin-left: -50px;
}

Demo

+3
source

ezanker, , , , , css ( ):

.ui-input-search::after{
   width:18px;
   height:22px;
   left: 50%;
   top: 40%;
   margin-left: -52px;
}
.ui-focus::after{
  left: 10%;
}
.ui-focus ::-webkit-input-placeholder {
   color: white;
   text-shadow: 0px 0px #FFffff;
}
.ui-focus :-moz-placeholder { /* Firefox 18- */
   color: white; 
   text-shadow: 0px 0px #FFffff;
}
.ui-focus ::-moz-placeholder {  /* Firefox 19+ */
  color: white;
  text-shadow: 0px 0px #FFffff;
}
.ui-focus :-ms-input-placeholder {  
   color: white; 
   text-shadow: 0px 0px #FFffff;
}

0

More articles:


All Articles