：主動選擇僅發生在點擊

Question

用下面的HTML：

<input type="text"> 

而CSS：

input[type="text"] {outline: none; border: thin solid red} 
input[type="text"]:active {border: thin solid yellow} 

我希望文本字段將有一個黃色邊框時，它是積極的（當用戶正在鍵入）。但是，新樣式僅適用於單擊元素時的情況。我怎樣才能達到我想要的效果？

Answer 1

你應該用:focus：

input[type="text"]:focus {border: thin solid yellow} 

JSFiddle Demo。

---

從W3C：

而元件被被用戶激活時，:active僞類適用。例如，在用戶按下鼠標按鈕並釋放它的時間之間。

:focus僞類適用於元素具有焦點（接受鍵盤或鼠標事件或其他形式的輸入）的情況。