如何僅使用 CSS 根據輸入欄位是否包含文字來設定輸入欄位的樣式？

無需JavaScript 即可識別輸入欄位中的文字

在CSS 樣式領域中，偵測輸入元素中是否存在文字可以是令人困惑的任務。然而，難以捉摸的 :empty 偽類和 [value=""] 選擇器無法產生所需的結果。

儘管如此，:placeholder-shown 偽類作為一種潛在的解決方案出現了。此偽類別針對具有佔位符屬性的輸入元素，而不顯示佔位符文字。

如何使用 :placeholder-shown

1. 確保您的輸入元素具有非空佔位符屬性。即使是單一空格也是可以接受的。
2. 當輸入包含文字時，使用 :not(:placeholder-shown) 選擇器設定輸入樣式。
3. 使用 :placeholder-shown 選擇器設定輸入樣式當它為空時。

例如：

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

此程式碼將著色輸入包含文字時為綠色，為空時為紅色。

注意事項

請注意，此技術依賴於佔位符屬性的使用。因此，它可能不適合不需要佔位符文字的場景。

以上是如何僅使用 CSS 根據輸入欄位是否包含文字來設定輸入欄位的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！