2016年4月1日 星期五

[CSS] input placeholder 樣式化

html 5 input 多了新的 attribute placeholder,要樣式話則需要使用擬態的方式。


  1. /* all */  
  2. ::-webkit-input-placeholder { color:#f00; }   
  3. ::-moz-placeholder { color:#f00; } /* firefox 19+ */  
  4. :-ms-input-placeholder { color:#f00; } /* ie */  
  5. input:-moz-placeholder { color:#f00; }   
  6.   
  7. /* individual: webkit */  
  8. #field2::-webkit-input-placeholder { color:#00f; }   
  9. #field3::-webkit-input-placeholder { color:#090background:lightgreen; text-transform:uppercase; }   
  10. #field4::-webkit-input-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999; }   
  11.   
  12. /* individual: mozilla */  
  13. #field2::-moz-placeholder { color:#00f; }   
  14. #field3::-moz-placeholder { color:#090background:lightgreen; text-transform:uppercase; }   
  15. #field4::-moz-placeholder { font-style:italictext-decoration:overlineletter-spacing:3pxcolor:#999; }  
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...