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?

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?

• javascript
• html
• css

1 Answer 1

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?