CODEWITHSUNDEEP
css
Hussain Khalil
Hussain Khalil

Reputation: 1650

:active selector occurs only on click

With the following HTML:

<input type="text">

And the CSS:

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

I hoped that the text field would have a yellow border when it is active (when the user is typing). However, the new style only applies when you are clicking on the element. How can I reach the effect I want?

Upvotes: 0

Views: 74

Answers (1)

dashtinejad
dashtinejad

Reputation: 6253

You should use :focus:

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

JSFiddle Demo.

From W3C:

The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.

The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).

Upvotes: 4

Related Questions