溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

使用CSS更改占位符顏色的方法

發(fā)布時(shí)間：2020-08-27 14:54:49 來(lái)源：億速云 閱讀：215 作者：小新 欄目：web開(kāi)發(fā)

使用CSS更改占位符顏色的方法？這個(gè)問(wèn)題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見(jiàn)到的。希望通過(guò)這個(gè)問(wèn)題能讓你收獲頗深。下面是小編給大家?guī)?lái)的參考內(nèi)容，讓我們一起來(lái)看看吧！

如何使用CSS更改占位符顏色？

在css中想要更改占位符的顏色，可以非標(biāo)準(zhǔn)選擇器::placeholder來(lái)實(shí)現(xiàn)，它是用于設(shè)置表單輸入框占位符的外觀(guān)，通過(guò)該選擇器可以改變占位符的樣式，例如：顏色。

對(duì)于不同的瀏覽器，::placeholder選擇器的寫(xiě)法是不同的，下面我們來(lái)了解一下。

對(duì)于Chrome，Mozilla和Opera瀏覽器，選擇器可以寫(xiě)為：

::placeholder

對(duì)于Internet Explorer，選擇器需要寫(xiě)為：

:-ms-input-placeholder

對(duì)于Internet Edge，選擇器需要寫(xiě)為：

::-ms-input-placeholder

代碼示例

下面我們通過(guò)簡(jiǎn)單的代碼示例來(lái)具體了解一下如何使用::placeholder選擇器來(lái)更改占位符顏色。

示例1：在不同瀏覽器中使用::placeholder選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS更改占位符顏色</title>
<style> 
::placeholder { /* Firefox, Chrome, Opera */ 
    color: blue; 
    font-size: 15px;
} 
  
:-ms-input-placeholder { /* Internet Explorer 10-11 */ 
    color: red; 
    font-size: 15px;
} 
  
::-ms-input-placeholder { /* Microsoft Edge */ 
    color: orange; 
    font-size: 15px;
} 
</style> 
</head>
<body>
<div class="demo">
<p>更改占位符顏色</p> 
<input type="text" placeholder="請(qǐng)輸入....."> 
</div>
</body>
</html>

輸出：

●  沒(méi)有使用::placeholder選擇器

使用CSS更改占位符顏色的方法

●  在谷歌瀏覽器中

使用CSS更改占位符顏色的方法

●  在Internet Explorer瀏覽器中

使用CSS更改占位符顏色的方法

示例2：在input標(biāo)簽的email屬性、textarea標(biāo)簽中使用占位符選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS更改占位符顏色</title>
<style> 
input[type="email"]::placeholder { /* Firefox, Chrome, Opera */ 
    color: blue; 
    font-size: 15px;
} 
textarea::placeholder { /* Firefox, Chrome, Opera */ 
    color: red; 
    font-size: 15px;
} 
</style> 
</head>
<body>
<div class="demo">
<p>更改占位符顏色</p> 
<input type="email" placeholder="請(qǐng)輸入email...."> <br /><br />
<textarea rows="10" cols="50" placeholder="請(qǐng)輸入email...."></textarea>
</div>
</body>
</html>

輸出：

使用CSS更改占位符顏色的方法

說(shuō)明：

占位符選擇器可以應(yīng)用于input標(biāo)簽的任何屬性（文本，電話(huà)，密碼等），以突出顯示任何不同屬性的顏色變化。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)使用CSS更改占位符顏色的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手