在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了。
1 ::-webkit-input-placeholder{} /* 使用webkit内核的浏览器 */ 2 :-moz-placeholder{} /* Firefox版本4-18 */ 3 ::-moz-placeholder{} /* Firefox版本19+ */ 4 :-ms-input-placeholder{} /* IE浏览器 */ 5 注1:冒号前写对应的input或textarea元素等。 6 注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。
css代码:
1 #input-test{ 2 color: #FFC0CB; 3 font-size: 1.2em; 4 width: 180px; 5 height: 36px; 6 } 7 #input-test::-webkit-input-placeholder{ 8 color: #ADD8E6; 9 } 10 #input-text::-moz-placeholder{11 color: #ADD8E6; 12 } 13 #input-text:-ms-input-placeholder{14 color: #ADD8E6; 15 }
HTML代码:
1 <div id="container"> 2 <input id="input-test" type="text" placeholder="修改placeholder样式" /> 3 </div>