Change Bootstrap Input Focus Blue Glow

Change Bootstrap input focus blue glow

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;
}

Remove default focus outline and change to different color

It's a box-shadow style applied on focus.

Sample Image

add this code to remove it:

.form-control:focus {
box-shadow:none;
}

You may add !important depending on your CSS order:

How to change focus glow of textarea in Bootstrap 3?

Try using:

textarea:focus, input:focus, .uneditable-input:focus {   
border-color: rgba(229, 103, 23, 0.8) !important;
box-shadow: 0 1px 1px rgba(229, 103, 23, 0.075) inset, 0 0 8px rgba(229, 103, 23, 0.6) !important;
outline: 0 none !important;
}

How come I can't remove the blue textarea border in Twitter Bootstrap?

You have write -webkit-appearance:none; like this:

textarea:hover, 
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
outline:0px !important;
-webkit-appearance:none;
box-shadow: none !important;
}

How to remove outline in bootstrap 4

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

textarea:focus, 
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
box-shadow: inset 0 -1px 0 #ddd;
}

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.

Override twitter bootstrap Textbox Glow and Shadows

.simplebox {
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}


Related Topics



Leave a reply



Submit