Change Bootstrap input focus blue glow

Detailed styling guide

When changing the input focus style, ensuring visual consistency across your application should be your first commandment. Focus states, after all, are not just for the looks - they serve as guides for accessibility.

Harmonizing visual style

Focus styles in Bootstrap cover <input>, <textarea>, and <select> elements. Changing such styles should therefore be done collectively across all elements:

.form-control:focus {
  border-color: #ced4da; /* New border on the block */
  outline: none; /* Goodbye browser default outline... */
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* ...hello custom shadow */
}


Limiting scope of style

Apply your styles to specific elements or classes to prevent a Midas touch scenario—turning everything to gold when you just wanted the touch on your button!

input.my-custom-input:focus {
  box-shadow: none; /* Chill, it's a no glow zone */
  border-color: #ff7518; /* Let's tango with a touch of orange */
}


The Sass advantage

With Bootstrap Sass, you can modify the _variables.scss or create a custom @mixin for a more adaptable solution. For Bootstrap 4 and 5, you can just do a quick change to the Sass variables and you're good to go:

$primary:    #007bff; // Skydiving on your page with sky blue
$input-focus-border-color: lighten($primary, 20%); // A sky blue with 20% more light. Light sky diving, anyone?


Your Sass files will need to be compiled before the CSS is served.

Advanced customization guide

The aim of customizing should always be to enhance the user experience. Be mindful of accessibility issues, browser compatibility, meaningful colour usage, and create dynamic interactions.