: активный селектор происходит только по щелчку

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 псевдо-класс применяется, если элемент активируется пользователем. Например, между тем, как пользователь нажимает кнопку мыши и отпускает ее.

Псевдокласс применяется, когда элемент имеет фокус (принимает события клавиатуры или мыши или другие формы ввода).