HTML5占位符css填充

Question

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

无论如何，这是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 plugin。

它开箱即用，它修复了我的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

我遇到了一个问题，它出现在Internet Explorer中。输入字段已设置样式

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

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

我的解决方案是设置：

line-height:normal;

Answer 6

删除行高确实会使您的文本与占位符文本对齐，但它无法正确解决您的问题，因为您需要根据此缺陷调整您的设计（这不是错误）。添加vertical-align也不会成功。我没有在所有浏览器中尝试过，但它确实无法在Safari 5.1.4中使用。

我听说过jQuery修复此问题，这不是跨浏览器占位符支持（jQuery.placeholder），但是对于样式占位符，但我还没有找到它。

与此同时，您可以解析为the table on this page，它会针对不同的样式显示不同的浏览器支持。

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

Answer 7

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

Answer 8

我创建了一个小提琴，使用你的截图作为背景图像并剥离了额外的标记，它似乎工作正常

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

这对你有用吗？如果没有，你能用你的确切标记和CSS更新小提琴吗？

Answer 9

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

我很想不去尝试解决这个问题而只是等待修复。这只是意味着需要做更多的工作。

Answer 10

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

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

VERTICAL-ALIGN。这可能是它唯一有效的时间，但尝试反而破坏了许多CSS代码。

Answer 11

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

Answer 12

我在John Catterfeld's blog上找到了解决这个问题的答案。

  

... Chrome（v20-30）实现了几乎所有的样式，但有一个重要的警告 - 占位符样式不会调整输入框的大小，所以要保持清晰，如行高和填充顶部或底部。

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

Answer 13

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

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

Answer 14

我已经为我的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>