咱們在輸入框中時常須要加入提示文字,更改提示文字的樣式:web
在未更改以前:瀏覽器
<lable> <input type="text" placeholder="Name"/> <input type="text" placeholder="Email Adress"/> <input type="text" placeholder="Phone Number"/> <input type="textarea" placeholder="Message"/> <button type="submit">Send</button> </lable>
1 input{ 2 border:1px solid; 3 border-color:transparent transparent #D0D0D0 transparent; 4 /*設置邊框 5 顏色透明留下底邊*/ 6 height:60px; 7 width:400px; 8 }
同樣的HTML代碼,加入設置placeholder樣式的代碼:spa
1 input::-webkit-input-placeholder{ 2 font-size:25px; 3 }/*webkit 內核瀏覽器*/ 4 input::-moz-placeholder{ 5 font-size:25px; 6 }/*Mozilla Firefox 19+*/ 7 input:-moz-placeholder{ 8 font-size:25px; 9 }/*Mozilla Firefox 4 to 18*/ 10 input:-ms-input-placeholder{ 11 font-size:25px; 12 }/*Internet Explorer 10+*/
效果:3d