如何使用 `:placeholder-shown` 透過 CSS 設定空輸入欄位的樣式？

使用CSS 設定空輸入欄位的樣式：實用指南

設定空白輸入欄位的樣式對CSS 來說是一個挑戰，因為將空值與common value="" 選擇器可能不可靠。為了有效地解決這種情況，我們深入研究了創新且有效的解決方案。

在現代瀏覽器中，:placeholder-shown 偽類可以解決這個問題。與針對佔位符文字的 ::placeholder 不同，:placeholder-shown 專門選擇空輸入欄位。這提供了一種在欄位沒有任何使用者輸入時應用樣式的精確方法。

為了說明這種優雅的方法，請考慮以下CSS 規則：

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

要利用此CSS 規則實際上，記住輸入欄位必須具有佔位符屬性至關重要。此外，在 Chrome 瀏覽器中，確保佔位符屬性中存在空格字元對於正常功能至關重要。這保證了 :placeholder-shown 偽類按預期觸發，即使輸入字段最初對用戶顯示為空。

以下是示範實現的範例：

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

總之，透過利用 :placeholder-shown 的強大功能，我們能夠輕鬆地在 CSS 中設定空輸入欄位的樣式。這種創新的偽類消除了 value="" 選擇器的限制，使開發人員能夠輕鬆建立使用者友好的表單。

以上是如何使用 `:placeholder-shown` 透過 CSS 設定空輸入欄位的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！