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

 

 

posted @ 2013-12-18 14:26  我的百科全书  阅读(569)  评论(0)  编辑  收藏  举报