css3 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 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;
}