ATOZ CSS快速提示：佔位符文字

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

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

P 代表佔位符文本

偽元素 :before 和 :after 非常適合構建複雜的設計功能，而不會使用非語義元素使標記混亂。其他偽元素，如 :first-line 和 :first-letter，使我們可以訪問 HTML 文檔中未標記的元素部分的樣式。

我們在偽元素屏幕截圖中查看了許多這些內容，但我們沒有查看的一個偽元素是用於設置佔位符文本的樣式。讓我們來解決這個問題。

選擇輸入佔位符

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

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

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

.name-field {
  color: red;
}

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

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

但這仍然會設置輸入字段中鍵入的任何用戶輸入文本的樣式，而不是設置佔位符文本本身的外觀。為此，我們需要一系列針對占位符偽元素的供應商前綴選擇器。

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

這看起來像是重複，但不幸的是，沒有更簡潔（Don’t Repeat Yourself）的方法來做到這一點。

以下方法無效：

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

這是因為任何瀏覽器都必須能夠“理解”逗號分隔系列中的每個選擇器，才能應用大括號內的樣式。

使用 Sass 設置佔位符樣式

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

@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;
}

這允許我使用單個 Sass @include 在所有瀏覽器中設置佔位符的樣式，這有助於使代碼更短、更易於維護。

設置佔位符樣式時注意特異性

在 IE 瀏覽器中，設置輸入的樣式可能會覆蓋為佔位符文本設置的樣式。

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* 占位符文本在 IE 中将为蓝色 */
}

確保 IE 佔位符樣式具有更高的特異性，以便它們按預期顯示。這甚至可能是使用 !important 的一個案例，但在使用這個強大的工具時務必小心。

注意佔位符的不透明度

在 Firefox 中，佔位符文本的默認不透明度約為 0.5，因此除非您還設置 opacity: 1，否則在佔位符上設置 color: red 將導致顏色變暗。

即使您使用 Normalize.css，也不會為您重置此項。如果完全不透明的佔位符對您的項目至關重要，請記住此技巧！

關於 CSS 佔位符文本的常見問題解答 (FAQ)

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

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

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

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

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

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

.name-field {
  color: red;
}

這會將佔位符文本的字體大小更改為 18px。

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

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

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

這會將佔位符文本的字體樣式更改為斜體。

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

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

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

這會將佔位符文本的不透明度更改為 0.5，使其半透明。

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

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

我可以在佔位符文本上使用 CSS 動畫嗎？

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

是否可以以不同的方式設置不同的佔位符樣式？

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

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

這將使具有類“input1”的輸入中的佔位符文本為紅色，而具有類“input2”的輸入中的佔位符文本為藍色。

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

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

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

不可以，您不能使用 CSS 更改佔位符文本。佔位符文本的內容只能使用 HTML 更改。

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

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

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

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

以上是ATOZ CSS快速提示：佔位符文字的詳細內容。更多資訊請關注PHP中文網其他相關文章！