Remove Blue Glow around Bootstrap Form Fields

by in Bootstrap

Quick and Dirty Override

By default, all Bootstrap text input areas, like contact form fields for example, have a blue glow when selected.

Here’s a very quick and easy way to disable the blue glow:

 

input, textarea, button {outline: none; }

 

Full Customization of Input Focus State

This Stack Overflow thread provides more advice on changing Bootstrap input focus blue glow.
http://stackoverflow.com/questions/14820952/change-bootstrap-input-focus-blue-glow

Boostrap now offers a Mixin to enable input focus state customization. Visit the Bootstrap Github repo for more info.

If you want to change the color blue to something else, this example was shared on Stack Overflow.

  • If you are using Bootstrap 3.x, you can now change the color with the new @input-border-focus variable.
  • See the commit for more info and warnings.
  • In _variables.scss update @input-border-focus.
  • To modify the size/other parts of this glow modify the mixins/_forms.scss

@mixin form-control-focus($color: $input-border-focus) {
$color-rgba: rgba(red($color), green($color), blue($color), .6);
&:focus {
border-color: $color;
outline: 0;
@include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px $color-rgba);
}
}

Roots/Sage WordPress Theme Override for Bootstrap Input Focus State Color

If you’re goal is to override the Bootstrap default input focus state on a WordPress project using Roots/Sage this is a quick technique.

  1. Edit ../sage/assets/styles/common/_variables.scss
  2. Add this variable to the end of your variables list: $input-border-focus: #fbfbfb;
  3. Make sure you change the color to your desired color code
  4. gulp