更改占位符颜色 - CSS

在Web开发中，占位符（placeholder）通常用于表单的输入框，用于提示用户输入的内容，占位符通常以灰色字体呈现。但是，有时候我们需要更改占位符的颜色以配合整个页面的风格。下面会讲解如何使用CSS来更改占位符的颜色。

1. 使用 ::placeholder 伪元素

在CSS3中，可以使用双冒号（::）符号来表示伪元素，通过选择器对元素进行样式设置，::placeholder就是伪元素之一。下面是一段CSS代码，使用 ::placeholder 伪元素来更改占位符的颜色：

input[type=text]::placeholder {
    color: #999;
}

上面的代码用于更改文本输入框的占位符颜色为灰色（#999）。

需要注意的是，不同浏览器的兼容性是不同的，需要添加浏览器前缀，如下：

/* WebKit */
input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #999;
}
/* Firefox 19+ */
input[type=text]::-moz-placeholder {          /* Firefox 19+ */
   color: #999;
}
/* Internet Explorer 10+ */
input[type=text]::-ms-input-placeholder {     /* Internet Explorer 10+ */
   color: #999;
}
/* Internet Explorer 11+ */
input[type=text]::-ms-input-placeholder {     /* Microsoft Edge */
   color: #999;
}

2. 使用 :placeholder-shown 伪类

还可以使用 :placeholder-shown 伪类，对已经显示了占位符文本的文本框进行样式设置，例如下面的代码：

input[type=text]:placeholder-shown {
    color: #999;
}

上面的代码会在占位符文本显示的时候，将颜色设置为灰色（#999）。

同样地，需要注意不同浏览器的兼容性，添加浏览器前缀，如下：

/* WebKit */
input[type=text]::-webkit-input-placeholder:placeholder-shown { /* Chrome/Opera/Safari */
    color: #999;
}
/* Firefox 19+ */
input[type=text]:-moz-placeholder:placeholder-shown {          /* Firefox 19+ */
   color: #999;
}
/* Internet Explorer 10+ */
input[type=text]:-ms-input-placeholder:placeholder-shown {     /* Internet Explorer 10+ */
   color: #999;
}
/* Internet Explorer 11+ */
input[type=text]:-ms-input-placeholder:placeholder-shown {     /* Microsoft Edge */
   color: #999;
}

总结

占位符的样式重要性不容忽视，可以提高整个页面的美观程度。使用CSS来更改占位符的颜色，可以使用 ::placeholder 伪元素或者 :placeholder-shown 伪类，不同浏览器需要添加不同的浏览器前缀。