我看过这个post已经尝试了所有可能的方法来更改占位符的填充,但唉,它似乎只是不想合作。
无论如何,这是 css 的代码。 (编辑:这是从 sass 生成的 css)
#search {
margin-top: 1px;
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 220px;
}
#search form {
position: relative;
}
#search input {
padding: 0 10px 0 29px;
color: #555555;
border: none;
background: url('/images/bg_searchbar.png?1296191141') no-repeat;
width: 180px;
height: 29px;
overflow: hidden;
}
#search input:hover {
color: #00ccff;
background-position: 0px -32px;
}
这是简单的 html:
<div id="search">
<form>
<input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
</form>
<div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
<ul id="search-results" class="dropdown">
</ul>
</div>
</div>
很简单?占位符由于某种原因关闭,但是当您尝试在输入字段中键入时,文本是对齐的。似乎您只能更改占位符的颜色(对于 webkit
),但如果我尝试编辑包含输入的填充,它会破坏输入的设计! 拔头发
以下是占位符和带有文本输入的输入字段的屏幕截图:
编辑:
现在我已经求助于这个 jquery plugin .
它开箱即用,解决了我的 chrome 问题。我仍然想找出问题所在(如果它与我的 chrome 或其他东西有关)
我很确定这不是样式,因为 John Catterfeld 毫无问题地复制了它,所以我希望外面的人仍然可以为我指明正确的方向,说明为什么会发生这种情况(我客户的 chrome 作为好吧。所以如果约翰使用的是 Windows,这可能是 Chrome/OSX 的原生功能)
最佳答案
我遇到了同样的问题。
我通过从输入中删除行高来修复它。检查是否有导致问题的行高
关于HTML5 占位符 css 填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4919680/