方法:先使用「::placeholder」選擇器選取需要修改的元素;然後給該元素加上「color:顏色值;」樣式即可。註placeholder是css3新增的選擇器,在不同的瀏覽器需要加上不同的前綴(“-ms-”,“ -webkit-”等)。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
placeholder這個屬性是HTML5中新增的屬性,作用是描述輸入字段預期值的提示訊息
如何修改placeholder的顏色呢?
但是存在一定的瀏覽器相容問題,以chorme為例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> input::-webkit-input-placeholder { color: #aab2bd; font-size: 12px; } input {//边框效果 border: 1px solid red; } </style> </head> <body> <input type="text" placeholder="请输入"> </body> </html>
chorme瀏覽器對應的選擇器是input::-webkit-input-placeholder
效果如下:
其他瀏覽器的選擇器如下:
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color : red; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color : red; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color : red; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color : red; } input::-ms-input-placeholder { /* Microsoft Edge */ color : red; }
#推薦學習:css影片教學
以上是CSS如何修改placeholder的顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!