使用 CSS 更改 HTML5 输入占位符颜色

在 HTML5 中，占位符是指在输入框中，未输入文本时显示的灰色文本。默认情况下，占位符颜色是灰色。但是，我们可以使用 CSS 来更改占位符的颜色。

代码片段

如下所示，我们可以通过设置 ::-webkit-input-placeholder，:-moz-placeholder，::-moz-placeholder，:-ms-input-placeholder的样式来更改占位符的颜色。

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

解释

• ::-webkit-input-placeholder：Webkit 浏览器（Chrome、Safari）使用的伪类选择器，用于设置文本框占位符的样式。
• :-moz-placeholder：Firefox 18 及以下版本使用的伪类选择器。
• ::-moz-placeholder：Firefox 19 及以上版本使用的伪类选择器。
• :-ms-input-placeholder：IE10+ 使用的伪类选择器。

在这个代码片段中，我们设置了占位符的颜色为红色。

总结

使用 CSS 更改 HTML5 的占位符颜色，可以使页面更美观，同时提高用户交互体验。通过设置不同浏览器的伪类选择器样式，可以保证在不同浏览器中都能有效地更改占位符的颜色。