zoukankan html css js c++ java

css 给<input>的placeholder应用样式

placeholder伪元素（有的浏览器版本把它当做伪类）可以用来对form中input等控件应用样式

 1 <!doctype html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta name="description" content="">
 7     <meta name="author" content="">
 8     
 9     <title>Template Index</title>
10 
11   <style>
12   ::-webkit-input-placeholder {
13     color: red;
14   }
15   ::-moz-placeholder { /* Firefox 19+ */
16     color: red;
17   }
18   :-ms-input-placeholder {
19     color: red;
20   }
21   :-moz-placeholder { /* Firefox 18-*/
22     color: red;
23   }
24   </style>
25 
26 </head>
27 <body>
28 
29 <input type="email" placeholder="qiu_deqing#qq.com"/>
30 
31     
32 </body>
33 </html>

效果如下

由于这个方法没有标准型，所以导致各种不同浏览器支持不一样，可能会变动很大，如需在获得焦点时改变样式:focus::-moz-placeholder {}

目前支持的样式属性：

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
opacity

查看全文

相关阅读:
第一章-环境准备
 selenium-pageobject设计模式
 自动化测试用例设计原则
 selenium隔离环境安装、以及示例
 json extractor获取返回值中动态新增的数据
 jmeter返回值乱码问题
 liunx命令
 SQL表结构语句
 测试网络脚本python
C# 订单流水号生成

原文地址：https://www.cnblogs.com/qiudeqing/p/3480294.html