How to add border to focus css

Question

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?

score 6 · Accepted Answer · answered May 23 '17 at 02:03

6

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?

answered May 23 '17 at 02:03

le_m

19,302
9
64
74

1

I see. I thought styling focus was an issue but I think I had some conflicting classes in there that prevented it from working the first time. – MisterCal May 23 '17 at 02:11
If you think, this had solved your problem, you should mark this answer as accepted (click on the gray check box, below the downvote button) – Lloyd Dominic May 23 '17 at 02:22

How to add border to focus css

1 Answers1