如何僅使用 CSS 檢測 HTML 輸入欄位中的文字輸入？

使用 CSS 偵測文字輸入

使用 CSS 自訂網頁時出現一個常見需求：能夠偵測輸入欄位是否包含文字。令人驚訝的是，這個功能並不是由 CSS 直接提供的。

嘗試的解決方案

各種方法均不成功，包括使用:empty 偽類和檢查空值[value=""].

CSS佔位符方法

但是，如果輸入字段有佔位符屬性，CSS 提供了解決方案：:placeholder-shown 偽類。此類別可用於區分空輸入欄位和帶有佔位符的輸入欄位。

實作

關鍵是確保 placeholder 屬性存在並包含非空白值，即使它只是一個空格。以下是一個例子：

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

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

結論

利用:placeholder-shown 偽類，你可以有效地檢測輸入字段是否包含文本，即使在頁面上你無法控制。

以上是如何僅使用 CSS 檢測 HTML 輸入欄位中的文字輸入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！