如何設置輸入框 input 中 placeholder的字體顏色、字號


一、須知

placeholder屬性是css3中新增加的屬性,IE9和Opera12以下版本的CSS選擇器均不支持占位文本。

 

二、設置placeholder文字顏色、字號

方式1

因為每個瀏覽器的CSS選擇器都有所差異,所以需要針對每個瀏覽器做單獨的設定(可以在冒號前面寫input和textarea)。

  ::-webkit-input-placeholder { /* WebKit browsers */

  color:#999;font-size:16px;

  }

  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */

  color:#999;font-size:16px;

  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */

  color:#999;font-size:16px;

  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */

  color:#999;font-size:16px;

  }

方式2、建議使用該方式 如果是在手機客戶端webview 只使用-webkit內核方式即可。

     input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

  color: #666;font-size:16px;

  }

  input:-moz-placeholder, textarea:-moz-placeholder {

  color:#666;font-size:16px;

  }

  input::-moz-placeholder, textarea::-moz-placeholder {

  color:#666;font-size:16px;

  }

  input:-ms-input-placeholder, textarea:-ms-input-placeholder {

  color:#666;font-size:16px;

  }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM