电话
13363039260
如何使用CSS更改占位符颜色？
2024-01-17 15:55 小编
如何使用CSS更改占位符颜色？
在css中想要更改占位符的颜色，可以非标准选择器::placeholder来实现，它是用于设置表单输入框占位符的外观，通过该选择器可以改变占位符的样式，例如：颜色。【相关视频教程推荐：CSS教程】
对于不同的浏览器，::placeholder选择器的写法是不同的，下面我们来了解一下。
对于Chrome，Mozilla和Opera浏览器，选择器可以写为：
::placeholder
对于InternetExplorer，选择器需要写为：
:-ms-input-placeholder
对于InternetEdge，选择器需要写为：
::-ms-input-placeholder
代码示例
下面我们通过简单的代码示例来具体了解一下如何使用::placeholder选择器来更改占位符颜色。
示例1：在不同浏览器中使用::placeholder选择器
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>CSS更改占位符颜色</title>
<style>
::placeholder{/*Firefox,Chrome,Opera*/
color:blue;
font-size:15px;
}
:-ms-input-placeholder{/*InternetExplorer10-11*/
color:red;
font-size:15px;
}
::-ms-input-placeholder{/*MicrosoftEdge*/
color:orange;
font-size:15px;
}
</style>
</head>
<body>
<divclass="demo">
<p>更改占位符颜色</p>
<inputtype="text"placeholder="请输入.....">
</div>
</body>
</html>
猜你喜欢
联络方式：
13363039260
微信二维码 