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

1、須知 
  placeholder屬性時css3中新增長的屬性,IE9和Opera12如下版本的CSS選擇器均不支持佔用文本。css

2、設置placeholder文字顏色、字號 
方式1 
  由於每一個瀏覽器的CSS選擇器都有所差別,因此須要針對每一個瀏覽器作單獨的設定(能夠在冒號前面寫input和textarea)。css3

    ::-webkit-input-placeholder{/*Webkit browsers*/
    color:#999;
    font-size:16px;
    }
    :-moz-placeholder{/*Mozilla Firefox 4 to 8*/
    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;
    }web

 

方式二、建議使用該方式,若是是在手機客戶端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; 
    }spa

    input::-moz-placeholder,textarea::-moz-placeholder{ 
    color:#666; 
    font-size:16px; 
    } 
    input:-ms-input-placeholder,textarea:-ms-input-placeholder{ 
    color:#666; 
    font-size:16px; 
    }code

相關文章
相關標籤/搜索