使

使用 CSS 设置占位符文本的样式

2025-06-10

使用 CSS 设置占位符文本的样式

SamanthaMing.com 的代码小贴士

使用伪元素来设置表单元素::placeholder中占位符文本的样式。大多数现代浏览器都支持此功能，但对于较旧的浏览器，则需要添加供应商前缀。<input><textarea>

::placeholder { 
  color: deeppink;
  font-size: 5rem;
  text-transform: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

HTML

<input placeholder="CSS Placeholder">
Enter fullscreen mode Exit fullscreen mode

供应商前缀

因此我使用的语法被大多数现代浏览器支持：

/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}
Enter fullscreen mode Exit fullscreen mode

但对于某些浏览器或较旧的浏览器，您将需要使用供应商前缀。

/* WebKit, Edge */
::-webkit-input-placeholder {
  color: deeppink;
}
/* Firefox 4-18 */
:-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* IE 10-11 */
:-ms-input-placeholder { 
  color: deeppink;
}
/* Edge */
::-ms-input-placeholder { 
  color: deeppink;
}
/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}
Enter fullscreen mode Exit fullscreen mode

哇！我知道，这个列表很长。而且你可能会注意到很多不同的实现方式。所以，让我们分解一下这些差异，了解一下这里发生了什么。

伪元素 vs 伪类

你可能注意到我用了双冒号::。这被称为伪元素，它是在CSS3中引入的。如果我们使用单冒号:，这将被称为伪类。

由于伪元素::是在 CSS3 中引入的，而不是早期的 CSS 版本，因此一些老版本的浏览器（例如 Internet Explorer）根本不支持它。而伪类 则:更早引入（在 CSS1 和 CSS2 中）。这就是为什么包括 Internet Explorer 在内的更多浏览器都支持它。

因此，在我们的::placeholder供应商前缀中，您将混合使用伪类和伪元素。

Firefox 占位符默认不透明度

好的，Firefox 的这个功能是怎么回事opacity: 1？因为默认情况下，Firefox 的占位符会应用不透明度值。所以为了覆盖这个设置，我们需要设置它。这样，我们的占位符文本就会显示出来，而不会像 Firefox 默认设置那样呈现出淡出的效果。

opacity: 1;
Enter fullscreen mode Exit fullscreen mode

CSS 处理无效选择器

所以你可能也在想，为什么我们不像这样将所有供应商前缀组合在一起：

::-moz-placeholder, /* Firefox 19+ */
:-moz-placeholder /* Firefox 4-18 */
{ 
  color: deeppink;
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

嗯，这是因为 CSS3 中有一条规则规定：

包含无效选择器的选择器组是无效的。

让我们看一个例子来了解这意味着什么。这是一个有效的 CSS 选择器

h1 {
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

因此在我们的 HTML 中，这将按预期显示

<h1>Hello</h1> 
<!-- This text will have a blue color-->
Enter fullscreen mode Exit fullscreen mode

但是如果我们添加无效的 CSS 选择器会发生什么情况

h1, /* valid */
h2::poop /* invalid */
{
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

由于组中存在无效的 CSS 选择器，因此整个组将被视为无效，并且不会应用任何样式。

<h1>Hello</h1> 
<!-- No blue color will be applied -->
Enter fullscreen mode Exit fullscreen mode

这就是为什么我们需要为每个浏览器设置单独的规则。否则，整个组都会被所有浏览器忽略。

⭐️但是！看起来这可能会在 CSS4 中发生改变。

通常，如果选择器链或选择器组中存在无效的伪元素或伪类，则整个选择器列表无效。如果伪元素（而非伪类）带有 -webkit- 前缀，则从 Firefox 63 开始，Blink、Webkit 和 Gecko 浏览器会假定它是有效的，而不会使选择器列表无效。

请参阅 Chris Coyier 的文章“一个无效的伪选择器等于整个被忽略的选择器”以了解更多相关内容。

支持的样式

以下是可应用于占位符文本的所有样式的列表：

  • background特性
  • color
  • font特性
  • letter-spacing
  • line-height
  • opacity
  • text-decoration
  • text-indent
  • text-transform
  • vertical-align
  • word-spacing
::placeholder { 
  /* styles */
}
Enter fullscreen mode Exit fullscreen mode

可访问性问题

能够设置占位符的样式真是太棒了。但我需要指出一点非常重要——占位符文本不能替代标签元素<label>！我刚接触 Web 编程的时候就犯过这个错误🙁。当你的表单完全依赖于占位符指令而没有标签时，这对可访问性非常有害。可访问性不仅对于确保你的网站对每个人都可访问至关重要，而且也有助于创造更好的用户体验。最终，创建一个更好的网站或 Web 应用程序💪

这里有一篇非常棒的文章，探讨了只使用占位符而不使用任何标签的担忧。以下是其中最重要的三点：

  1. 由于占位符文本在自然界中会消失，因此可能会影响用户的短期记忆
  2. 如果没有标签，用户就无法在提交表单之前检查他们的工作。
  3. 当出现错误消息时，人们不知道如何解决问题。

自动添加供应商前缀

如果你不想处理所有供应商前缀，可以使用PostCSS的Autoprefixer插件。该插件会解析你的 CSS 并添加供应商前缀。

资源

感谢阅读❤
打个招呼！Instagram | Twitter | Facebook | Medium |博客

鏂囩珷鏉ユ簮锛�https://dev.to/samanthaming/styling-placeholder-text-with-css-2he0
Devto 翻译
PREV
[Agentica] 每个后端开发人员都是优秀的 AI 开发人员
NEXT
在 JavaScript 中设置默认参数