如何在jQuery mobile 1.4.0中将占位符和搜索图标放置在搜索输入的中心? [英] How to position the Placeholder and Search Icon at the center of Search input in jQuery mobile 1.4.0?
问题描述
在我的jQuery移动应用程序中,我需要将搜索输入字段的搜索图标和占位符放置在中心,我尝试了以下代码,但没有成功,占位符和图标仍显示在左侧在android设备上.请帮助我如何将SearchIcon和占位符放置在搜索"输入字段的中心?
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;
}
推荐答案
在中间插入占位符文本:
Putting placeholder text in the middle:
您是否也想在中间键入文字?
Do you want tyled text in the middle too?
如果是:
.ui-input-search input{
text-align: center;
}
DEMO
如果否:
::-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
这篇关于如何在jQuery mobile 1.4.0中将占位符和搜索图标放置在搜索输入的中心?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!