Change Bootstrap input focus blue glow

Question

Does anyone know the how to change Bootstrap\'s input:focus? The blue glow that shows up when you click on an input field?

Answer 1

To disable the blue glow (but you can modify the code to change color, size, etc), add this to your css:

.search-form input[type="search"] {  
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 0px;
} 

Here's a screencapture showing the effect: before and after:

Answer 2

I could not resolve this with CSS. It seems like Boostrap is getting the last say even though I have by site.css after bootstrap. In any event, this worked for me.

$(document).ready(function () {
    var elements = document.getElementsByClassName("form-control");

    Array.from(elements).forEach(function () {
        this.addEventListener("click", cbChange, false);
    })

    });

function cbChange(event) {
    var ele = event.target;
    var obj = document.getElementById(ele.id);
    obj.style.borderColor = "lightgrey";
}

Later I found this to work in the css. Obviously with form-controls only

.form-control.focus, .form-control:focus {
    border-color: gainsboro;
} 

Here are before and after shots from Chrome Developer tool. Notice the difference in border color between focus on and focus off. On a side note, this does not work for buttons. With buttons. With buttons you have to change outline property to none.

Answer 3

In the end I changed the following css entry in bootstrap.css

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {   
  border-color: rgba(126, 239, 104, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Answer 4

Building up on @wasinger's reply above, in Bootstrap 4.5 I had to override not only the color variables but also the box-shadow itself.

$input-focus-width: .2rem !default;
$input-focus-color: rgba($YOUR_COLOR, .25) !default;
$input-focus-border-color: rgba($YOUR_COLOR, .5) !default;
$input-focus-box-shadow: 0 0 0 $input-focus-width $input-focus-color !default;

Answer 5

If you want to remove the shadow completely add the class shadow-none to your input element.

Answer 6

Why not just use ?

 input:focus{
        outline-color : #7a0ac5;
    }