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占位符的颜色（for ），但如果我尝试编辑包含输入的填充，则会破坏输入的设计！拉出头发

以下是占位符和带有文本输入的输入字段的内容：

编辑：

目前，我已经使用了这个jquery插件。

它开箱即用，可以解决我的Chrome问题。我仍然想找出问题所在（如果与我的Chrome或某些内容有关）

我很确定这不是样式，因为约翰·卡特菲尔德（John Catterfeld）毫无问题地复制了它，所以我希望那里的人仍然可以为我指出正确的方向（为什么我的客户也是如此）。如果John使用的是Windows，这可能是Chrome / OSX的本机）

我有同样的问题。

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

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

input{
  text-indent: 10px;
}

如果要保持行高并强制占位符相同，则可以使用较新的浏览器版本直接编辑占位符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; 

为我工作;）

删除行高确实会使您的文本与占位符文本对齐，但是它不能正确解决您的问题，因为您需要使设计适应此缺陷（这不是错误）。添加垂直对齐也不会解决问题。我没有在所有浏览器中都尝试过，但是肯定不能在Safari 5.1.4中使用。

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

同时，您可以解析到此页面上的表格，该表格显示不同样式的不同浏览器支持。

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

我有一个问题，仅出现在Internet Explorer中。输入字段的样式

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

不幸的是，在IE中，初始占位符显示的位置不正确。但是，当我单击该字段然后离开该字段时，占位符出现在正确的位置。

我的解决方案是设置：

line-height:normal;

设置line-height: 0px;为我在Chrome中修复

我使用您的屏幕截图作为背景图片并删除了多余的标记，创建了一个小提琴，它似乎可以正常工作

http://jsfiddle.net/fLdQG/2/（需要Webkit浏览器）

这对您有用吗？如果没有，您是否可以使用确切的标记和CSS更新小提琴？

我将os x上的Chrome更新到最新的稳定版本（9.0.597.94）时就注意到了这个问题，因此这是一个Chrome错误，希望可以修复。

我很想不要尝试解决此问题，而只是等待修复。这只是意味着要进行更多的工作。

占位符不受浏览器的影响，line-height并且padding在浏览器上不一致。

我找到了另一种解决方案。

VERTICAL-ALIGN。这可能是唯一的工作时间，但是请尝试改而使许多CSS代码崩溃。

删除行高或使用填充设置...在所有浏览器中都可以使用

我在约翰·卡特费尔德（John Catterfeld）的博客上找到了可以解决我的问题的答案。

... Chrome（v20-30）几乎实现了所有样式，但有一个主要警告-占位符样式不会调整输入框的大小，因此请避免行高和顶部或底部的填充。

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

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

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

我已经为Angular应用测试了此页面上此处给出的几乎所有方法。只有我发现通过 插入空格的解决方案，即

角材料

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

非角材料

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