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

查看全文

相关阅读:
图片上传iOS
SpringMVC最基础配置
 随笔- 人生感悟
 学习SpringMVC——从HelloWorld开始
 springMVC
struts2简介
 Struts2 实例
 java多线程
 服务器非正常断电后自动加电重启如何设置？！
delphi for android 获取手机号

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