HTML5占位符css填充
HTML5占位符css填充
提问于 2011-02-07 17:26:32
我已经看到了这个post，并尝试了所有我可以改变我的占位符的填充，但是可惜的是，它似乎就是不想合作。
不管怎样，这是css的代码。( css EDIT：这是从sass生成的)
#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也是如此)。因此，如果John使用的是windows，这可能是Chrome/OSX原生的。)
回答 14
Stack Overflow用户
回答已采纳
发布于 2011-04-15 21:08:40
我也有同样的问题。
我通过从我的输入中删除line-height来修复它。检查是否存在导致问题的线高
Stack Overflow用户
发布于 2016-05-17 21:41:56
我也有类似的问题，我的问题是侧填充，而解决方案是文本缩进，我没有意识到文本缩进会影响占位符的侧位置。
input{
text-indent: 10px;
}Stack Overflow用户
发布于 2013-06-05 09:51:42
如果你想保持你的行高，并强制占位符有相同的，你可以直接编辑占位符CSS，因为新的浏览器版本。这对我来说很有效：
input::-webkit-input-placeholder { /* WebKit browsers */
line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
line-height: 1.5em;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4919680
复制相关文章
相似问题