How to change Bootstrap input focus blue glow with CSS?

Spread the love

Sometimes, we want to change Bootstrap input focus blue glow with CSS.

In this article, we’ll look at how to change Bootstrap input focus blue glow with CSS.

How to change Bootstrap input focus blue glow with CSS?

To change Bootstrap input focus blue glow with CSS, we change the styles of the form-control class.

For instance, we write

.form-control:focus {
  border-color: #ff0000;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}

to select all form inputs with the form-control class.

And we set the styles for when it’s focused.

We change the border color to the #ff0000 red color.

And then we add a shadow to the inputs with box-shadow.

Conclusion

To change Bootstrap input focus blue glow with CSS, we change the styles of the form-control class.

Leave a Reply

Your email address will not be published. Required fields are marked *