如何在 jQuery 移动版 1.4.0 中将占位符和搜索图标定位在搜索输入的中心

Question

在我的jQuery移动应用程序中，我需要将搜索输入字段的搜索图标和占位符放在中心，我已经尝试了以下代码，但它不起作用，占位符和图标仍然出现在Android设备上的左侧。请帮助我如何将搜索图标和占位符定位在搜索输入字段的中心？

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

Answer 1

将占位符文本放在中间：

你也想在中间贴上文字吗？

如果是：

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

演示

如果否：

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

演示

如果您愿意，您可以将图标放在中心，但是当您键入时它不会消失，所以我认为这没有意义。 但如果你喜欢：

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

演示

Answer 2

为了扩展 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;
}

演示