Html HTML5占位符css填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4919680/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 placeholder css padding
提问by corroded
I've seen this postalready and tried everything I could to change the padding for my placeholder but alas, it seems it just doesn't want to cooperate.
我已经看过这篇文章并尝试了一切我可以改变我的占位符的填充但是唉，它似乎只是不想合作。
Anyway, here is the code for the css. (EDIT: This is the generated css from sass)
无论如何，这是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;
}
And here's the simple html:
这是简单的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>
Pretty simple? the placeholder is off for some reason but when you try to type in the input field, the text is the aligned. It seems that you can only change the color(for webkit) of the placeholder, but if I try to edit the padding of the containing input, it wrecks the design of the input! pulls out hair
很简单？占位符由于某种原因关闭，但是当您尝试在输入字段中输入时，文本是对齐的。似乎您只能更改webkit占位符的颜色（for ），但是如果我尝试编辑包含输入的填充，则会破坏输入的设计！拔头发
Here are screenies of the placeholder and the input field with text input:
以下是占位符和带有文本输入的输入字段的屏幕截图：
EDIT:
编辑：
For now I have resorted to this jquery plugin.
现在我已经求助于这个jquery 插件。
It works right out of the box and it fixes my chrome's problem. I would still like to uncover what the problem is (if it has something to do with MY chrome or something)
它开箱即用，解决了我的 chrome 问题。我仍然想发现问题是什么（如果它与我的 chrome 或其他东西有关）
I'm pretty sure it's not the styles since John Catterfeld reproduced it with no problems, so I'm hoping someone out there could still point me to the right direction as to why this is happening to me(my client's chrome as well. So this is probably native to Chrome/OSX if John is using windows)
我很确定这不是 John Catterfeld 毫无问题地复制它后的样式，所以我希望那里的人仍然可以为我指出正确的方向，为什么这会发生在我身上（我客户的 chrome 也是如此。所以如果 John 使用 Windows，这可能是 Chrome/OSX 原生的）
回答by Johansrk
I got the same issue.
我遇到了同样的问题。
I fixed it by removing line-height from my input. Check if there is some lineheight which is causing the problem
我通过从输入中删除 line-height 来修复它。检查是否有导致问题的行高
回答by talsibony
I had similar issue, my problem was with the side padding, and the solution was with, text-indent, I wasn't realize that text indent effect the placeholder side position.
我有类似的问题，我的问题是侧边距，解决方案是文本缩进，我没有意识到文本缩进会影响占位符的侧边位置。
input{
text-indent: 10px;
}
回答by floribon
If you want to keep your line-height and force the placeholder to have the same, you can directly edit the placeholder CSS since the newer browser versions. That did the trick for me:
如果你想保持你的行高并强制占位符具有相同的，你可以直接编辑占位符 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;
}
回答by user2264934
line-height: normal;
worked for me ;)
为我工作;)
回答by Babs
I had a problem, which appears just in internet explorer. Input field was styled
我遇到了一个问题，它只出现在 Internet Explorer 中。输入字段的样式
height:38px;
line-height:38px;
Unfortunately in IE the initial placeholder appears not at the correct position. But when I have clicked into the field and then left this field, the placeholder appeared on the right position.
不幸的是，在 IE 中，初始占位符没有出现在正确的位置。但是当我点击该字段然后离开该字段时，占位符出现在正确的位置。
My solution was to set:
我的解决方案是设置：
line-height:normal;
回答by zykadelic
Removing the line-height indeed makes your text align with your placeholder-text, but it doesn't properly solve your problem since you need to adapt your design to this flaw (it's not a bug). Adding vertical-align won't do the deal either. I haven't tried in all browsers, but it doesn't work in Safari 5.1.4 for sure.
删除行高确实使您的文本与占位符文本对齐，但它不能正确解决您的问题，因为您需要使您的设计适应此缺陷（这不是错误）。添加 vertical-align 也不会解决问题。我还没有在所有浏览器中尝试过，但它肯定在 Safari 5.1.4 中不起作用。
I have heard of a jQuery fix for this, that is not cross-browser placeholder support (jQuery.placeholder), but for styling placeholders, but I haven't found it yet.
我听说过一个 jQuery 修复程序，它不是跨浏览器占位符支持 (jQuery.placeholder)，而是用于样式占位符，但我还没有找到。
In the meantime, you can resolve to the table on this pagewhich shows different browser support for different styles.
同时，您可以解析此页面上的表格，该表格显示了对不同样式的不同浏览器支持。
Edit: Found the plugin! jquery.placeholder.min.jsprovides you with both full styling capabilities and cross-browser support into the bargain.
编辑：找到插件！jquery.placeholder.min.js为您提供了完整的样式功能和跨浏览器支持。
回答by JobJob
Setting line-height: 0px;fixed it for me in Chrome
line-height: 0px;在 Chrome 中设置为我修复了它
回答by rb-
I found the answer that remedied my frustrations regarding this on John Catterfeld's blog.
我在John Catterfeld 的博客上找到了解决我对此感到沮丧的答案。
... Chrome (v20-30) implements almost all styles but with a major caveat – the placeholder styles do no resize the input box, so stay clear of things like line-height and padding top or bottom.
... Chrome (v20-30) 实现了几乎所有的样式，但有一个重要的警告——占位符样式不会调整输入框的大小，因此请避免行高和顶部或底部填充等内容。
If you are using line-height or padding you are going to be frustrated with the resulting placeholder. I haven't found a way around that up to this point.
如果您使用 line-height 或 padding，您会对生成的占位符感到沮丧。到目前为止，我还没有找到解决方法。
回答by Roman
If you want move placeholder text right and leave the cursor on the blank space you need to add space(s) at the start of the placeholder attribute:
如果要向右移动占位符文本并将光标留在空白处，则需要在占位符属性的开头添加空格：
<input type="email" placeholder=" Your email" />
回答by WasiF
I have tested almost all methods given here in this page for my Angular app. Only I found solution via that inserts spaces i.e.
我已经为我的 Angular 应用程序测试了本页中给出的几乎所有方法。只有我通过 插入空格找到了解决方案，即
Angular Material
角材料
<input matInput type="text" class="pl-2" placeholder=" Email">
Non Angular Material
无角材料
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>