空白時使用不同的樣式輸入文本字段（使用CSS）？

例如，新加載的表單包含具有綠色背景色的<input type="text">。一旦用戶向該字段輸入值，我希望它被改爲藍色。空白時使用不同的樣式輸入文本字段（使用CSS）？

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

您可以給文本框的required屬性：

<input type="text" required />

，然後檢查的有效性與CSS：

input:invalid { background: green; }

或相反的（僅適用於不同的舊的瀏覽器）：

input:valid { background: blue; }

2012-01-01 19:50:03 Rudie

如果您使用XML語法編寫，則需要將該屬性擴展爲'required =「required」'... – BoltClock 2012-01-01 19:58:59

爲什麼我要強制爲此設置所需的屬性？這不是一個好的解決方案 – vsync 2013-08-30 18:31:13

@vsync如果該字段不是必需的，我同意。純粹造型，這不是一個好的解決方案。如果該字段是必需的，那就是。 – Rudie 2013-08-30 22:31:00

您只能使用JavaScript來做到這一點。使用jQuery的Here's an example。

如果您只想更改focus上的background-color，則可以使用適當命名的:focus僞選擇器。 Here's an example of this。

2011-12-29 15:06:58

好吧，我希望保持外觀侷限於樣式表。感謝您的腳本和js工具。 – Alkenrinnstet 2011-12-29 16:16:16

當然。 '：focus'是一個不錯的僞選擇器，它可以完成你想要的大部分功能，但是現在我們已經習慣了這麼多的定製，而這很大程度上依賴於JS。這就是生活。 – 2011-12-29 16:19:58

回答