How to change the border color of the textarea on focus with CSS?

Spread the love

Sometimes, we want to change the border color of the textarea on focus with CSS.

In this article, we’ll look at how to change the border color of the textarea on focus with CSS.

To change the border color of the textarea on focus with CSS, we set the border of the input on focus.

For instance, we write

.input:focus {
  outline: none !important;
  border: 1px solid red;
  box-shadow: 0 0 10px #719ece;
}

to select elements in focus with class input with .input:focus.

Then we set its border property to add a border.

And we remove the default outline with outline: none !important;.

To change the border color of the textarea on focus with CSS, we set the border of the input on focus.