CODEWITHSUNDEEP
javascripthtmlcss
MisterCal
MisterCal

Reputation: 622

How to add border to focus css

I would like to add styling input text box that has a red border when clicked and no border when you click away. I have tried styling input:active but the problem is that when you click away, the red border is still there. Rather than input:active I wan't to manipulate the input:focus to have a red border like so

 textarea:focus, input:focus{
        outline: none; 
        border: 1px solid red;
  }

is there a way to do this?

Upvotes: 3

Views: 12904

Answers (1)

le_m
le_m

Reputation: 20228

is there a way to do this?

Yes, just do it. Your suggested CSS rules are the right choice as evidenced by the following snippet:

textarea:focus, input:focus {
  outline: none; 
  border: 1px solid red;
}
<textarea></textarea>
<input type="text">

See also How to reset / remove chrome's input highlighting / focus border?

Upvotes: 6

Related Questions