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

以下是占位符和带有文本输入的输入字段的屏幕截图：

编辑：

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

它开箱即用，可以解决我的 chrome 问题。我仍然想找出问题所在（如果它与我的 chrome 或其他东西有关）

我很确定这不是风格，因为 John Catterfeld 没有问题地复制了它，所以我希望那里的人仍然可以为我指出正确的方向，为什么这会发生在我身上（我的客户的 chrome 也是如此。所以如果 John 使用的是 windows，这可能是 Chrome/OSX 的本机）

原文由 corroded 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我遇到了同样的问题。

我通过从输入中删除 line-height 来修复它。检查是否有导致问题的线高

原文由 Johansrk 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

角材料

添加   在 placeholder 如果 padding 不起作用 - 但不是推荐的方式

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

原文由 WasiF 发布，翻译遵循 CC BY-SA 4.0 许可协议