本文是 AtoZ CSS 系列的一部分。您可以在這裡找到該系列的其他條目。您可以查看其對(duì)應(yīng)視頻偽元素的完整文本和屏幕截圖。

歡迎來(lái)到我們的 AtoZ CSS 系列！在本系列中，我將探討以字母表中不同字母開(kāi)頭的各種 CSS 值（和屬性）。我們知道，有時(shí)屏幕截圖是不夠的，因此在本文中，我們添加了一個(gè)關(guān)於樣式佔(zhàn)位符文本的新技巧。

P 代表佔(zhàn)位符文本

偽元素 :before 和 :after 非常適合構(gòu)建複雜的設(shè)計(jì)功能，而不會(huì)使用非語(yǔ)義元素使標(biāo)記混亂。其他偽元素，如 :first-line 和 :first-letter，使我們可以訪(fǎng)問(wèn) HTML 文檔中未標(biāo)記的元素部分的樣式。

我們?cè)趥卧仄聊唤貓D中查看了許多這些內(nèi)容，但我們沒(méi)有查看的一個(gè)偽元素是用於設(shè)置佔(zhàn)位符文本的樣式。讓我們來(lái)解決這個(gè)問(wèn)題。

選擇輸入佔(zhàn)位符

首先，讓我們想像一下以下 HTML：

<input class="name-field" type="text" placeholder="Enter your name">

我們可以將輸入文本的顏色設(shè)置為紅色，如下所示：

.name-field {
  color: red;
}

我們還可以根據(jù)其占位符屬性選擇和設(shè)置輸入的樣式：

input[placeholder="Enter your name"] {
  color: red;
}

但這仍然會(huì)設(shè)置輸入字段中鍵入的任何用戶(hù)輸入文本的樣式，而不是設(shè)置佔(zhàn)位符文本本身的外觀。為此，我們需要一系列針對(duì)占位符偽元素的供應(yīng)商前綴選擇器。

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

這看起來(lái)像是重複，但不幸的是，沒(méi)有更簡(jiǎn)潔（Don’t Repeat Yourself）的方法來(lái)做到這一點(diǎn)。

以下方法無(wú)效：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

這是因?yàn)槿魏螢g覽器都必須能夠“理解”逗號(hào)分隔系列中的每個(gè)選擇器，才能應(yīng)用大括號(hào)內(nèi)的樣式。

使用 Sass 設(shè)置佔(zhàn)位符樣式

解決這種重複 CSS 的一種方法是使用 Sass 混合宏。這是我在 99% 的項(xiàng)目中使用的：

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

這允許我使用單個(gè) Sass @include 在所有瀏覽器中設(shè)置佔(zhàn)位符的樣式，這有助於使代碼更短、更易於維護(hù)。

設(shè)置佔(zhàn)位符樣式時(shí)注意特異性

在 IE 瀏覽器中，設(shè)置輸入的樣式可能會(huì)覆蓋為佔(zhàn)位符文本設(shè)置的樣式。

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中將為藍(lán)色 */
}

確保 IE 佔(zhàn)位符樣式具有更高的特異性，以便它們按預(yù)期顯示。這甚至可能是使用 !important 的一個(gè)案例，但在使用這個(gè)強(qiáng)大的工具時(shí)務(wù)必小心。

注意佔(zhàn)位符的不透明度

在 Firefox 中，佔(zhàn)位符文本的默認(rèn)不透明度約為 0.5，因此除非您還設(shè)置 opacity: 1，否則在佔(zhàn)位符上設(shè)置 color: red 將導(dǎo)致顏色變暗。

即使您使用 Normalize.css，也不會(huì)為您重置此項(xiàng)。如果完全不透明的佔(zhàn)位符對(duì)您的項(xiàng)目至關(guān)重要，請(qǐng)記住此技巧！

關(guān)於 CSS 佔(zhàn)位符文本的常見(jiàn)問(wèn)題解答 (FAQ)

如何更改 CSS 中佔(zhàn)位符文本的顏色？

可以通過(guò)使用 ::placeholder 偽元素來(lái)更改 CSS 中佔(zhàn)位符文本的顏色。此偽元素允許您設(shè)置輸入或文本區(qū)域元素中佔(zhàn)位符文本的樣式。以下是如何將顏色更改為紅色的示例：

<input class="name-field" type="text" placeholder="Enter your name">

請(qǐng)記住，瀏覽器兼容性很重要。對(duì)於 Firefox，使用 ::-moz-placeholder；對(duì)於 Internet Explorer，使用 :-ms-input-placeholder；對(duì)於 Chrome、Safari 和 Opera，使用 ::-webkit-input-placeholder。

我可以更改佔(zhàn)位符文本的字體大小嗎？

是的，您可以更改佔(zhàn)位符文本的字體大小。就像更改顏色一樣，您可以使用 ::placeholder 偽元素來(lái)更改字體大小。這是一個(gè)示例：

.name-field {
  color: red;
}

這會(huì)將佔(zhàn)位符文本的字體大小更改為 18px。

是否可以更改佔(zhàn)位符文本的字體樣式？

絕對(duì)可以，您可以更改佔(zhàn)位符文本的字體樣式。您可以使其為斜體、粗體或任何您想要的其他樣式。以下是如何使其為斜體的示例：

input[placeholder="Enter your name"] {
  color: red;
}

這會(huì)將佔(zhàn)位符文本的字體樣式更改為斜體。

我可以更改佔(zhàn)位符文本的不透明度嗎？

是的，您可以更改佔(zhàn)位符文本的不透明度。這可以通過(guò)在 CSS 中使用 opacity 屬性來(lái)完成。這是一個(gè)示例：

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

這會(huì)將佔(zhàn)位符文本的不透明度更改為 0.5，使其半透明。

如何向佔(zhàn)位符文本添加背景顏色？

不幸的是，您無(wú)法向佔(zhàn)位符文本添加背景顏色。 ::placeholder 偽元素僅允許您設(shè)置佔(zhàn)位符文本的顏色、字體大小、字體樣式和不透明度。它不支持 background-color 等其他屬性。

我可以在佔(zhàn)位符文本上使用 CSS 動(dòng)畫(huà)嗎？

不可以，您無(wú)法在佔(zhàn)位符文本上使用 CSS 動(dòng)畫(huà)。 ::placeholder 偽元素不支持 CSS 動(dòng)畫(huà)或過(guò)渡。

是否可以以不同的方式設(shè)置不同的佔(zhàn)位符樣式？

是的，您可以以不同的方式設(shè)置不同的佔(zhàn)位符樣式。您只需要為每個(gè)輸入或文本區(qū)域元素使用不同的類(lèi)或 ID。這是一個(gè)示例：

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

這將使具有類(lèi)“input1”的輸入中的佔(zhàn)位符文本為紅色，而具有類(lèi)“input2”的輸入中的佔(zhàn)位符文本為藍(lán)色。

我可以將偽類(lèi)與 ::placeholder 一起使用嗎？

不可以，您不能將 :hover、:active 或 :focus 等偽類(lèi)與 ::placeholder 一起使用。 ::placeholder 偽元素不支持偽類(lèi)。

是否可以使用 CSS 更改佔(zhàn)位符文本？

不可以，您不能使用 CSS 更改佔(zhàn)位符文本。佔(zhàn)位符文本的內(nèi)容只能使用 HTML 更改。

我可以在 ::placeholder 中使用媒體查詢(xún)嗎？

是的，您可以在 ::placeholder 中使用媒體查詢(xún)。這允許您根據(jù)屏幕大小或設(shè)備以不同的方式設(shè)置佔(zhàn)位符文本的樣式。這是一個(gè)示例：

<input class="name-field" type="text" placeholder="Enter your name">

這會(huì)將屏幕寬度為 600px 或更小的屏幕上的佔(zhàn)位符文本的顏色更改為紅色。

以上是ATOZ CSS快速提示：佔(zhàn)位符文字的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！