How to position the Placeholder and Search Icon at the center of Search input in jQuery mobile 1.4.0?

Question

In my jQuery mobile app , I need to position the search Icon and Place holder of a search input field at the center , I have tried the folowing code but it didnt work , the placeholder and the icon are still appearing at the left on android devices . Please help me How can I Position the SearchIcon and Placeholder at 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;    
 }

score 3 · Answer 1 · answered Feb 27 '14 at 20:39

3

Putting placeholder text in the middle:

Do you want tyled text in the middle too?

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 place the icon in the center if you like, however it does not disappear when you type, so I think it does not make sense. But if you like:

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

DEMO

answered Feb 27 '14 at 20:39

ezanker

24,628
1
20
35

@ezankerThanks alot , I have tried the first demo the tyled text it works and appears in the center but the place holder still not appears at the center on android version 4.x !! How can we fix this issue – user Feb 27 '14 at 20:51
I visited the fiddle on my nexus android 4.4 and it works fine. Placeholder is in the center. – ezanker Feb 27 '14 at 21:02
@ezankerIts working as webview , but when I use this code in my jQM & Phonegap app for android it works on android version 2.3 but didnt on android v4.x – user Feb 27 '14 at 21:09
@ezankerDo you have any idea about this issue ? Can it be solved? – user Feb 27 '14 at 21:12
It seems a bug in jQM with android version 4 :( , Many Many thanks for your help +1 – user Feb 27 '14 at 21:55
i don't know phonegap. – ezanker Feb 27 '14 at 21:57
@ezankerOk,I have encountered a problem with JQM can you help me in solving it http://stackoverflow.com/questions/22082117/page-background-image-moves-and-stretch-with-collapsible-set-in-jquery-mobile-1 Please ? – user Feb 27 '14 at 22:46

score 0 · Answer 2 · edited May 23 '17 at 12:24

To expand on ezanker's answer, you can also remove the search icon as there is a class applied once the input gains focus, therefore you could rewrite the css to look like (I also styled the icon position more to my liking):

.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;
}

Demo

How to position the Placeholder and Search Icon at the center of Search input in jQuery mobile 1.4.0?

2 Answers2

Linked