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

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

P 代表占位符文本

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

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

選擇輸入占位符

首先，讓我們想象一下以下 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è)置輸入字段中鍵入的任何用戶輸入文本的樣式，而不是設(shè)置占位符文本本身的外觀。為此，我們需要一系列針對(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;  
}

這看起來像是重復(fù)，但不幸的是，沒有更簡潔（Don’t Repeat Yourself）的方法來做到這一點(diǎn)。

以下方法無效：

::-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è)置占位符樣式

解決這種重復(fù) 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è)置占位符的樣式，這有助于使代碼更短、更易于維護(hù)。

設(shè)置占位符樣式時(shí)注意特異性

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

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

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

注意占位符的不透明度

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

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

關(guān)于 CSS 占位符文本的常見問題解答 (FAQ)

如何更改 CSS 中占位符文本的顏色？

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

<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。

我可以更改占位符文本的字體大小嗎？

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

.name-field {
  color: red;
}

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

是否可以更改占位符文本的字體樣式？

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

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

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

我可以更改占位符文本的不透明度嗎？

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

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

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

如何向占位符文本添加背景顏色？

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

我可以在占位符文本上使用 CSS 動(dòng)畫嗎？

不可以，您無法在占位符文本上使用 CSS 動(dòng)畫。::placeholder 偽元素不支持 CSS 動(dòng)畫或過渡。

是否可以以不同的方式設(shè)置不同的占位符樣式？

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

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

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

我可以將偽類與 ::placeholder 一起使用嗎？

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

是否可以使用 CSS 更改占位符文本？

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

我可以在 ::placeholder 中使用媒體查詢嗎？

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

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

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

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