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

CSS如何修改placeholder的顏色

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

方法：先使用「::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;
}

WebKit, Blink, Edge瀏覽器等需要帶上-webkit-前綴，且是雙冒號，寫的時候還要帶上input
針對火狐瀏覽器則有兩種寫法，都需要帶上-moz-前綴。火狐低版本的使用冒號（：），而高版本的使用雙冒號（：：）；火狐瀏覽器不需要帶input。
placeholder屬性只在IE10 才支持，IE10、IE11的寫法是加上-ms-前綴，使用的是冒號（：），需要帶上input

#推薦學習：css影片教學

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

html5 css css3 webkit edge 选择器 input

陳述：

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

上一篇：cs如何實現翻轉效果下一篇：cs如何實現翻轉效果

看更多