设置input 的placeholder的字体样式

设置input占位符的样式

  1. input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
  2.     color: red;
  3. }
  4. input::-moz-placeholder { /* Firefox 19+ */  
  5.     color: red;
  6. }
  7. input:-ms-input-placeholder { /* IE 10+ */
  8.     color: red;
  9. }
  10. input:-moz-placeholder { /* Firefox 18- */
  11.     color: red;
  12. }
  14. <input type="text" placeholder="请设置用户名">

设置input聚焦时的样式

  1. input:focus {   
  2.   background-color: red;
  3. }

取消input的边框

  1. border: none;
  2. outline: none;
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>CSS高级常见技巧汇总</title>
  6.   <style type="text/css">
  7.     input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
  8.       color: red;
  9.     }
  10.     input::-moz-placeholder { /* Firefox 19+ */
  11.       color: red;
  12.     }
  13.     input:-ms-input-placeholder { /* IE 10+ */
  14.       color: red;
  15.     }
  16.     input:-moz-placeholder { /* Firefox 18- */
  17.       color: red;
  18.     }
  19.     input:focus {
  20.       background-color: red;
  21.     }
  22.     input{
  23.       border: none;
  24.       outline: none;
  25.     }
  26. </style>
  27. </head>
  28. <body>
  29. <input type="text" placeholder="请设置用户名">
  30. </body>
  31. </html>