logo标签列表

HTML5占位符、CSS填充(padding)

htmlgoogle-chromewebkitcss
163

我已经看到这篇文章并尝试了我所能想到的一切来改变我的占位符的填充，但不幸的是，它似乎就是不愿合作。

不管怎样，这是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），但是如果试图编辑包含输入的填充，它会破坏输入框的设计！抓狂

这里是占位符和输入框中带有文本输入的屏幕截图：

placeholder text input

编辑：

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

它可以立即解决我的Chrome问题。 我仍然想找出问题出在哪里（如果与我的Chrome或其他什么有关），因为John Catterfeld没有遇到过任何问题，所以我希望有人能够指出为什么这种情况会发生在我身上（我的客户端的Chrome也一样。所以如果John使用Windows，则可能是Chrome / OSX的本机问题）

2
你能提供生成的 CSS 吗？相比 SASS 源代码，那样会更容易处理。 - RoToRa
+1 这个插件真的很棒 - 简单易用，拥有我需要的正确选项。可能是我迄今为止遇到的最好的占位符解决方案。 - easwee
如果有人在使用 Bootstrap 时遇到问题，可以尝试设置以下两个选项来解决：将字号设置为“large”而不是“px”，并将行高设置为“normal”。 - necker
14个回答
238

我遇到了同样的问题。

我通过删除输入框中的行高来解决了这个问题。请检查是否存在一些行高导致问题出现。

7
错误。使用输入元素时，占位符不受行高的影响，但是填充不是最好的解决方案。最好的方法是使用（我知道它通常没有任何作用，但在这种情况下它会起作用）垂直对齐的CSS属性。 - RIK
1
是的，出乎意料地，这确实解决了问题。即使没有行高的帮助，输入的文本仍然保持垂直居中。 - hndcrftd
62
当输入框没有直接设置行高时，添加 line-height: normal; 对我起了作用。 - philfreo
无论如何，您都必须为IE浏览器添加行高，但这对Safari也有效。 - Kaloyan Stamatov
171

我曾遇到类似问题，我的问题与侧边填充有关，解决方案是使用text-indent属性。我没有意识到text-indent会影响占位符的侧边位置。

input{
  text-indent: 10px;
}
28

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

对我很有用 ;)

适用于Safari。 - monteirobrena
在Safari中工作过。 - SHENE
6

Angular Material（角度材料）

如果padding无效，可以在placeholder中添加&nbsp;- 但不推荐这种方式。

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

非 Angular Material

为您的 input 字段增加 padding，如下所示。点击 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>

添加   是一种非常不好的做法。 - Cristian Sepulveda
@CristianSepulveda 你说得对。这只是在没有其他方法可用时的权宜之计。 - WasiF
1
你应该非常明确地表达你的答案。这篇文章的写法可能会让人产生这是一个好的实践方法的印象。 - Cristian Sepulveda
1
Nah 运行良好，比使用 999999 行 CSS 实现这样简单的东西要好。 - savram
3

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

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

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

我的解决方案是设置：

line-height:normal;
3

在Chrome浏览器中，将line-height: 0px;设置为固定值可以解决我的问题。

2
您能解释一下这个与四年前接受的答案有何不同吗？ - Nathan Tuggy
2
@NathanTuggy 给我的建议是从元素中完全删除 line-height 属性。但对我来说，这并没有起作用，解决问题的方法是将 line-height 设置为 0px。 - JobJob
同样的问题，这个方法对我也有效。 - aeroson
3

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

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

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

2

去掉行高确实可以使您的文本与占位符文本对齐，但它并不能完全解决您的问题，因为您需要将设计适应这个缺陷（它不是一个错误）。添加垂直对齐也无法解决问题。我没有在所有浏览器中尝试过，但在Safari 5.1.4中肯定不起作用。

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

同时，您可以参考此页面上的表格，其中显示了不同样式的不同浏览器支持情况。

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

我正在尝试寻找一种非占位符的解决方案，因为我已经使用了上面的jQuery插件 :) 感谢您的帮助！ - corroded
请记住，这是两个不同的插件。我不确定您正在使用的插件是什么（演示在我的任何浏览器中都无法正常工作），但是此插件使用元素的占位符属性，并动态创建一个呈现在输入字段上方的 span，从而提供最大的样式可能性。 - zykadelic
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接