首頁  >  文章  >  web前端  >  CSS如何修改placeholder的顏色

CSS如何修改placeholder的顏色

醉折花枝作酒筹
醉折花枝作酒筹原創
2021-04-13 10:43:1234466瀏覽

方法:先使用「::placeholder」選擇器選取需要修改的元素;然後給該元素加上「color:顏色值;」樣式即可。註placeholder是css3新增的選擇器,在不同的瀏覽器需要加上不同的前綴(“-ms-”,“ -webkit-”等)。

CSS如何修改placeholder的顏色

本教學操作環境: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;
}
  • WebKit, Blink, Edge瀏覽器等需要帶上-webkit-前綴,且是雙冒號,寫的時候還要帶上input
  • 針對火狐瀏覽器則有兩種寫法,都需要帶上-moz-前綴。火狐低版本的使用冒號(:),而高版本的使用雙冒號(::);火狐瀏覽器不需要帶input。
  • placeholder屬性只在IE10 才支持,IE10、IE11的寫法是加上-ms-前綴,使用的是冒號(:),需要帶上input

#推薦學習:css影片教學

以上是CSS如何修改placeholder的顏色的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn