HTML5占位符css填充

Question

我已经看过这篇文章并尝试了一切我可以改变占位符的填充但是唉,似乎它只是不想合作.

无论如何,这是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占位符的颜色(for ),但如果我尝试编辑包含输入的填充,它会破坏输入的设计!拉出头发

以下是占位符和带文本输入的输入字段的屏幕:

编辑:

现在我已经使用了这个jquery插件.

它开箱即用,它修复了我的chrome问题.我还是想揭开问题所在(如果它与MY chrome有什么关系)

我很确定这不是风格,因为John Catterfeld没有任何问题地重现它,所以我希望那里的人仍然可以指出我正确的方向,为什么这发生在我身上(我的客户的铬也是如此.所以如果John正在使用Windows,这可能是Chrome/OSX原生的)

Answer 1

我遇到了同样的问题.

我通过从输入中删除行高来修复它.检查是否存在导致问题的线高度

Answer 2

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

input{
  text-indent: 10px;
}

Answer 3

如果要保持行高并强制占位符具有相同的值,则可以直接编辑占位符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;
}

Answer 4

line-height: normal; 

为我工作;)

Answer 5

角材料

添加 在placeholder, 像

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

无角材料

添加padding到您的input领域，如下所示。点击Run Code Snippet查看演示

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