為空時將不同的樣式應用於輸入文本字段（使用 CSS）？

Question

例如，一個新加載的表單包含一個具有綠色背景顏色的<input type="text"> 。 一旦用戶在字段中輸入一個值，我希望它改為藍色。

是否可以僅使用 CSS 來完成此操作？ 我知道有input[type='text'][value]選擇器。 但是，這並不反映用戶在完成加載后對表單所做的任何更改，因此如果加載的表單沒有任何值，無論用戶做什么，它都將保持不變。

Answer 1

您可以為文本字段required屬性：

<input type="text" required />

然后使用 CSS 檢查有效性：

input:invalid { background: green; }

或相反（僅與舊瀏覽器不同）：

input:valid { background: blue; }

Answer 2

您只能使用 JavaScript 執行此操作。 這是一個使用 jQuery的示例。

如果您只想更改focus上的background-color ，您可以使用恰當命名的:focus偽選擇器。 這是一個例子。

Answer 3

這只能通過使用 CSS 來實現。

  input:placeholder-shown{
    background:#cacaca;
  }

更多細節在這里。