如何更改placeholder属性中文字颜色

熟悉HTML5的人应该都知道，placeholder这个属性是HTML5中新增的属性，该属性的作用是规定可描述输入字段预期值的简短的提示信息，该提示会在用户输入之前显示在输入字段中，会在用户输入字段后消失，有些浏览器则是获得焦点后该提示便消失（如Safari、IE）

适用范围：placeholder 属性适用于下面的 input 类型：text、search、url、tel、email 和 password。

因为是HTML5中新增的属性，所以会存在兼容性问题。下面说说浏览器的支持情况：

IE10+、Firefox、Opera、Chrome 和 Safari 均支持 placeholder 属性。IE9及以下版本不支持input的placeholder属性。

案例：
该提示文字会有自己默认的颜色

浏览器默认的：<input type="text" placeholder="请输入您要搜索的内容" />

在这里插入图片描述
然而有时候，我们并不希望用该默认颜色，而是想自定义颜色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{/* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-placeholder{/* Mozilla Firefox 4 to 18 */
            color: red;
        }
        input:-ms-input-placeholder{
            color: red;
        }
    </style>
   

</head>
<body>
        自定义placeholder：<input type="text" placeholder="请输入您要搜索的内容" />

</body>
</html>

在这里插入图片描述

如何更改placeholder属性中文字颜色

猜你喜欢