怎样运用CSS变动占位符色彩?
在css中想要变动占位符的色彩,能够非标准选择器::placeholder来完成,它是用于设置表单输入框占位符的表面,经由过程该选择器能够转变占位符的款式,比方:色彩。【相干视频教程引荐:CSS教程】
关于差别的浏览器,::placeholder选择器的写法是差别的,下面我们来相识一下。
关于Chrome,Mozilla和Opera浏览器,选择器能够写为:
::placeholder
关于Internet Explorer,选择器需要写为:
:-ms-input-placeholder
关于Internet Edge,选择器需要写为:
::-ms-input-placeholder
代码示例
下面我们经由过程简朴的代码示例来细致相识一下怎样运用::placeholder选择器来变动占位符色彩。
示例1:在差别浏览器中运用::placeholder选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS变动占位符色彩</title> <style> ::placeholder { /* Firefox, Chrome, Opera */ color: blue; font-size: 15px; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: red; font-size: 15px; } ::-ms-input-placeholder { /* Microsoft Edge */ color: orange; font-size: 15px; } </style> </head> <body> <div class="demo"> <p>变动占位符色彩</p> <input type="text" placeholder="请输入....."> </div> </body> </html>
输出:
● 没有运用::placeholder选择器
● 在谷歌浏览器中
● 在Internet Explorer浏览器中
示例2:在input标签的email属性、textarea标签中运用占位符选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS变动占位符色彩</title> <style> input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ color: blue; font-size: 15px; } textarea::placeholder { /* Firefox, Chrome, Opera */ color: red; font-size: 15px; } </style> </head> <body> <div class="demo"> <p>变动占位符色彩</p> <input type="email" placeholder="请输入email...."> <br /><br /> <textarea rows="10" cols="50" placeholder="请输入email...."></textarea> </div> </body> </html>
输出:
申明:
占位符选择器能够应用于input标签的任何属性(文本,电话,暗码等),以凸起显现任何差别属性的色彩变化。
以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。更多精彩内容人人能够关注ki4网相干教程栏目!!!
以上就是怎样运用CSS变动占位符色彩?(代码示例)的细致内容,更多请关注ki4网别的相干文章!