HTML5占位符 css 填充

我已经看到了这个 邮寄，并尝试了一切我可以改变我的占位符填充，但唉，它似乎只是不想合作。

总之，这是 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) ，但是如果我尝试编辑包含输入的填充，它会破坏输入的设计！拔头发

下面是占位符和输入框的截图，其中包含文本输入:

placeholder text input

编辑:

现在我已经求助于这个 Jquery 插件。

开箱即用，解决了铬合金的问题。我仍然想揭示问题是什么(如果它与我的铬或东西)

我敢肯定这不是风格，因为约翰卡特菲尔德复制它没有问题，所以我希望有人仍然可以指出正确的方向，为什么这是发生在我身上(我的客户的铬也是。因此，如果 John 使用的是 windows，那么这可能是 Chrome/OSX 的本地版本)

243022 次浏览
小开

我已经创建了一个小提琴使用您的屏幕截图作为背景图片，并剥离出额外的标记，它似乎工作得很好

Http://jsfiddle.net/fldqg/2/ (需要使用 webkit 浏览器)

这对你有用吗? 如果没有，你可以用你的精确标记和 CSS 更新小提琴吗？

小开

我注意到这个问题的时候，我更新了最新的稳定版本(9.0.597.94)的 OS x 上的 Chrome，所以这是一个 Chrome 错误，希望将得到修复。

我甚至不会试图解决这个问题，只是等待修复。把它取出来只意味着更多的工作。

小开
最佳答案

我也有同样的问题。

我通过从输入中移除 line-height 来修复它。检查是否有一些 line-height 导致了这个问题

小开

占位符在浏览器上不受 line-height和 padding的影响。

不过我找到了另一个解决办法。

这可能是唯一一次它的工作，但尝试代替和洞穴许多行的 CSS 代码。

小开

删除行高确实会使文本与占位符文本保持一致，但这并不能恰当地解决问题，因为您需要调整设计以适应这个缺陷(这不是一个 bug)。添加垂直对齐也不会达成交易。我没有试过所有的浏览器，但它肯定不能在 Safari 5.1.4中工作。

我听说过一个 jQuery 修复方案，它不是跨浏览器占位符支持(jQuery.placeholder) ，而是用于样式占位符，但我还没有找到它。

同时，您可以解析为 这一页上的表格，它显示不同样式的不同浏览器支持。

编辑: 找到了插件! Jquery.placeholder.min.js为您提供完整的样式功能和跨浏览器的支持进入讨价还价。

小开

如果希望保持行高并强制占位符具有相同的行高，则可以直接编辑占位符 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;
}
小开 
line-height: normal;

为我工作;)

小开

我有个问题出现在 Internet Explorer 里输入框被设计成

height:38px;
line-height:38px;

不幸的是，在 IE 中，最初的占位符出现在不正确的位置。但是，当我单击进入字段，然后离开这个字段时，占位符出现在正确的位置。

我的解决方案是:

line-height:normal;
小开

删除行高或设置使用填充... 它的工作在所有浏览器

小开

设置 line-height: 0px;修复了我在 Chrome 中的问题

小开

我也有类似的问题，我的问题是侧边填充，解决方案是，文本缩进，我没有意识到文本缩进影响了占位符的侧位置。

input{
text-indent: 10px;
}
小开

我在 John Catterfeld 的博客上找到了解决这个问题的答案。

Chrome (v20-30)实现了几乎所有的样式，但有一个重要的警告——占位符样式不会调整输入框的大小，所以不要使用行高和填充顶部或底部之类的东西。

如果您使用的是行高或填充，那么您会对生成的占位符感到沮丧。到目前为止，我还没找到解决的办法。

小开

如果您想将占位符文本右移，并将光标留在空白处，则需要在占位符属性的开头添加空格:

<input type="email" placeholder="  Your email" />
小开

角状物质

如果 padding不起作用，在 placeholder中加入 &nbsp;-但不是推荐的方式

<input matInput type="text" placeholder="&nbsp;&nbsp;Email">

非角质材料

将 padding添加到 input字段，如下所示。单击 Run Code Snippet查看演示

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


提交答案