HTML5 占位符 css 填充答案

【问题标题】：HTML5 placeholder css paddingHTML5 占位符 css 填充
【发布时间】：2011-06-22 14:59:36
【问题描述】：

我已经看到了这个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 问题。我仍然想找出问题所在（如果它与我的 chrome 或其他东西有关）

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

【问题讨论】：

能否提供生成的CSS？这比使用 SASS 源要容易得多。
+1 这个插件很棒 - 简单并且有我需要的选项。可能是迄今为止我偶然发现的最佳占位符解决方案。
如果有人在设置引导时遇到问题，这两个选项有帮助：font-size: large;而不是 px；和行高：正常；

标签： html google-chrome webkit css

【解决方案1】：

我创建了一个小提琴，使用您的屏幕截图作为背景图像并去除了额外的标记，它似乎工作正常

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

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

【讨论】：

嗯，我检查了链接，但它对我也不起作用。你认为我的 chrome 中有一个插件/东西导致它吗？截图：grab.by/8OFf
使用 safari 对其进行了检查，并且可以正常工作。 chrome 和 safari 不应该渲染相同的东西吗？
嗯，我不知道有一个插件会像这样影响你的布局，但是 Chrome 和 Safari 对我来说都可以正常工作（是的，它们应该呈现相同的东西）。
我在 mac 上使用 9.0.597.84(chrome)。你用的是哪个？
我在 Windows 7 上使用 Chrome 8.0.552.237。

【解决方案2】：

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

我什至不想尝试解决这个问题，只是等待修复。这只是意味着需要做更多的工作来解决它。

【讨论】：

mmm 那么确认了吗？有没有办法“降级”我们的 chrome 以检查它是否真的是 chrome？
现在是 2013 年，我在最新版本的 chrome 上仍然存在这个问题：版本 27.0.1453.116 m

【解决方案3】：

我遇到了同样的问题。

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

【讨论】：

错了。对于输入元素，占位符不受行高的影响，但填充不是最佳解决方案。最好的方法是使用（我知道它通常不会做任何事情，但在这种情况下它会做）VERTICAL-ALIGN CSS 属性。
是的，令人惊讶的是，确实解决了这个问题。即使没有 line-height 帮助，输入的文本仍然保持垂直居中。
当输入中没有 line-height 直接时，添加 line-height: normal; 对我有用
无论如何你必须为 ie 浏览器添加 line-height，但这对 safari 来说是这样的

【解决方案4】：

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

不过我找到了另一个解决方案。

VERTICAL-ALIGN。这可能是它唯一有效的一次，但请尝试这样做，并隐藏多行 CSS 代码。

【讨论】：

对我没有任何帮助。

【解决方案5】：

删除 line-height 确实使您的文本与占位符文本对齐，但它并不能正确解决您的问题，因为您需要使您的设计适应这个缺陷（这不是错误）。添加vertical-align 也无济于事。我没有在所有浏览器中尝试过，但它在 Safari 5.1.4 中肯定不起作用。

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

同时，您可以解析到the table on this page，它显示了不同浏览器对不同样式的支持。

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

【讨论】：

试图找到一个非占位符修复，因为我已经使用了上面的 jquery 插件 :) 感谢您的帮助！
请记住，这是两个不同的插件。我不确定您使用的是什么（演示在我的任何浏览器中都不起作用），但是这个使用元素的占位符属性，并动态创建在输入字段上方呈现的跨度，提供最大的造型可能性。

【解决方案6】：

如果您想保持 line-height 并强制占位符具有相同的值，您可以直接编辑占位符 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;
}

【讨论】：

【解决方案7】：

line-height: normal;

为我工作；）

【讨论】：

在 Safari 中工作。
曾在野生动物园工作

【解决方案8】：

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

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

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

我的解决方案是设置：

line-height:normal;

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

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

【讨论】：

你能解释一下这增加了四年前接受的答案吗？
@NathanTuggy 对我来说，接受的答案建议您从元素中完全删除 line-height 属性。对我来说什么也没做，解决我的问题是设置line-height: 0px
这里也一样，这实际上为我解决了这个问题。

【解决方案11】：

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

input{
  text-indent: 10px;
}

【讨论】：

【解决方案12】：

我在John Catterfeld's blog 上找到了解决我对此感到沮丧的答案。

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

如果您使用 line-height 或 padding，您将会对生成的占位符感到沮丧。到目前为止，我还没有找到解决方法。

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

角度材质

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

【讨论】：