MisterCal MisterCal - 1 year ago 67
CSS Question

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?

Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download