如何使用CSS更改占位符颜色?

2024-01-17 10:12 小编

在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>


Tag: 如何
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码