placeholder屬性 樣式修改
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 8 input::-webkit-input-placeholder { 9 /* placeholder顏色 */ 10 color: #aab2bd; 11 /* placeholder字體大小 */ 12 font-size: 12px; 13 /* placeholder位置 */ 14 text-align: right; 15 } 16 input { 17 border: 1px solid red;
18 } 19 </style> 20 </head> 21 <body> 22 23 <input type="text" placeholder="請輸入手機號"> 24 25 </body> 26 </html>
顯示結果:
備注:
::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; }