如何使用 CSS 設定空輸入欄位的樣式？

CSS 中的空輸入欄位樣式

根據輸入欄位的空狀態查詢輸入欄位需要 CSS 中的特定方法。雖然提供的 input[value=""] 選擇器在現代瀏覽器中不起作用，但有一個可用的解決方案。

輸入 :placeholder-shown。此偽類專門針對空輸入字段，可讓您套用一旦輸入字段包含值就會刪除的樣式。例如：

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

要注意的是，必須在 HTML 中設定 placeholder 屬性，才能讓 :placeholder-shown 選擇器正常運作。此外，Chrome 要求至少有一個空格字元作為佔位符值。

確保包含帶有空格的佔位符屬性，如下所示：

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

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