Reputation: 16691

Change Bootstrap input focus blue glow

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

Upvotes: 264

Answers (24)

Jan Zahradník

Reputation: 2497

My goal was pretty simple - to align the focus glow color with my primary theme color.

For that I needed to override $primary variable before @import "bootstrap/variables" in my SASS and the magic happened. I believe it will work for any other theme colors (alert, danger) as well.

Upvotes: 1

nilanka jayasanka

Reputation: 49

Try this way,It's work for me.

input:focus, textarea:focus{
     box-shadow: none !important;
}

Upvotes: 3

Pratap Raju

Reputation: 1

outline: 0; box-shadow: none; css

Upvotes: 0

Mukesh

Reputation: 31

Try this, it's same as bootstrap's input...

input:focus{
  color: #212529;
  background-color: #FFF;
  border-color: #86B7FE;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

Upvotes: 2

Amanda

Reputation: 1

This should help remove it!

input[type = text] {
  border: none;
}

input[type = text]:focus {
  border: none;
  box-shadow: none;
 }

Upvotes: 0

Mȍhǟmmǟd Șamȋm

Reputation: 271

Simple one

To remove it:

.form-control, .btn {
    box-shadow: none !important;
    outline: none !important;
}

To change it

.form-control, .btn {
    box-shadow: new-value !important;
    outline: new-value !important;
}

Upvotes: 11

Rohith kumar

Reputation: 11

This will work 100% use this:

.form-control, .form-control:focus{
   box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
   border: rgba(255, 255, 255, 0);
}

Upvotes: 1

Goulven

Reputation: 889

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;

Upvotes: 5

Wael Assaf

Reputation: 1303

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

Upvotes: 6

Sachin

Reputation: 1425

For the input border before the focus. You can specify your favorite color you want to use and other css like padding etc


.input {
    padding: 6px 190px 6px 15px;
    outline: #2a65ea auto 105px ;
}

When we focus on input. You can specify your favorite color outline you wish


.input:focus{
    box-shadow: none;
    border-color: none;
    outline: lightgreen auto 5px ;
}

Upvotes: 1

user10484617

Reputation:

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.

Upvotes: 0

Nikhil Kulkarni

Reputation: 674

Why not just use ?

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

Upvotes: 0

radhoo

Reputation: 2945

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: enter image description here

Upvotes: 12

dcx86

Reputation: 1226

You can modify the .form-control:focus color without altering the bootstrap style in this way:

Quick fix

.form-control:focus {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

Full explanation

Find the bootstrapCDN version that you are using. E.g. for me right now is 4.3.1: https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css
Search for the class you want to modify. E.g. .form-control:focus and copy the parameters that you want to modify into your css. In this case is border-color and box-shadow.
Choose a color for the border-color. In this case I choose to pick up the same green the bootstrap uses for their .btn-success class, by searching for that particular class in the bootstrap.css page mentioned in the step 1.
Convert the color you have picked to RGB and add that to the box-shadow parameter without altering the fourth RGBA parameter (0.25) that bootstrap has for transparency.

Upvotes: 80

igaster

Reputation: 13653

You can use the .form-control selector to match all inputs. For example to change to red:

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

Put it in your custom css file and load it after bootstrap.css. It will apply to all inputs including textarea, select etc...

Upvotes: 226

wasinger

Reputation: 381

In Bootstrap 4, if you compile SASS by yourself, you can change the following variables to control the styling of the focus shadow:

$input-btn-focus-width:       .2rem !default;
$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;

Note: as of Bootstrap 4.1, the $input-btn-focus-color and $input-btn-focus-box-shadow variables are used only for input elements, but not for buttons. The focus shadow for buttons is hardcoded as box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);, so you can only control the shadow width via the $input-btn-focus-width variable.

Upvotes: 17

Steve

Reputation: 101

In Bootstrap 3.3.7 you can change the @input-border-focus value in the Forms section of the customizer:

Upvotes: 1

user7179686

Reputation:

For Bootstrap v4.0.0 beta release you will need the following added to a stylesheet that overrides Bootstrap (either add in after CDN/local link to bootstrap v4.0.0 beta or add !important to the stylings:

.form-control:focus {
  border-color: #6265e4 !important;
  box-shadow: 0 0 5px rgba(98, 101, 228, 1) !important;
}

Replace the border-color and the rgba on the box-shadow with which ever colour style you'd like*.

Upvotes: 20

Mindsect Team

Reputation: 2571

Actually, in Bootstrap 4.0.0-Beta (as of October 2017) the input element isn't referenced by input[type="text"], all Bootstrap 4 properties for the input element are actually form based.

So it's using the .form-control:focus styles. The appropriate code for the "on focus" highlighting of an input element is the following:

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: none;
}

Pretty easy to implement, just change the border-color property.

Upvotes: 5

massanishi

Reputation: 2054

I landed to this thread looking for the way to disable glow altogether. Many answers were overcomplicated for my purpose. For easy solution, I just needed one line of CSS as follows.

input, textarea, button {outline: none; }

Upvotes: 8

homefreelancer

Reputation: 106

Add an Id to the body tag. In your own Css (not the bootstrap.css) point to the new body ID and set the class or tag you want to override and the new properties. Now you can update bootstrap anytime without loosing your changes.

html file:

  <body id="bootstrap-overrides">

css file:

#bootstrap-overrides input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, textarea:focus{
  border-color: red;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
  outline: 0 none;
}

Upvotes: 8

Nate T

Reputation: 2908

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

Upvotes: 61

felix001

Reputation: 16691

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

Upvotes: 281

peater

Reputation: 1273

Here are the changes if you want Chrome to show the platform default "yellow" outline.

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: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}

Upvotes: 12

Change Bootstrap input focus blue glow

Answers (24)

Quick fix

Full explanation

Related Questions