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

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

一種常見的樣式需求是將特定規則套用於空白輸入欄位。這對於向用戶提供視覺提示非常有用，例如佔位符文字或彩色邊框。但是，使用 input[value=""] 選擇器來定位空輸入可能無法如預期運作。

在現代瀏覽器中，:placeholder-shown 偽類提供了一種更可靠的方式來設定空輸入欄位的樣式。此偽類的目標是佔位符文字目前可見的輸入字段，表示輸入字段為空。

要將紅色邊框應用於空輸入字段，您可以使用以下CSS：

input:placeholder-shown {
  border: 1px solid red;
}

請注意，您還必須在HTML 中的輸入字段上設定佔位符屬性：

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

Chrome 需要至少一個空格字元作為佔位符值來觸發:placeholder-shown 偽類。這確保了輸入欄位在技術上不為空，同時仍允許使用者輸入。

透過使用 :placeholder-shown，您可以建立針對空輸入欄位的自訂樣式並提供增強的使用者回饋。

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