CSS修改placeholder颜色的方法

2023-06-14 12:18

短信预约 -IT技能 免费直播动态提醒

小编给大家分享一下CSS修改placeholder颜色的方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

方法：先使用“::placeholder”选择器选中需要修改的元素；然后给该元素添加“color:颜色值;”样式即可。注placeholder是css3新增的选择器，在不同的浏览器需要加不同的前缀（“-ms-”，“ -webkit-”等）。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

placeholder这个属性是HTML5中新增的属性，作用是描述输入字段预期值的提示信息

如何修改placeholder的颜色呢?

但是存在一定的浏览器兼容问题,以chorme为例:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <style>        input::-webkit-input-placeholder {        color: #aab2bd;        font-size: 12px;    }    input {//边框效果        border: 1px solid red;    }    </style></head><body>        <input type="text" placeholder="请输入">    </body></html>

chorme浏览器对应的选择器是input::-webkit-input-placeholder

其他浏览器的选择器如下:

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