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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      amp  focus       border-color   color      outline  0       include box-shadow inset 0 1px 1px rgba 0 0 0  075   0 0 4px  color-rgba

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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       lt body id  bootstrap-overrides  gt    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      See also  best way to override bootstrap css

User · Answer

In Bootstrap 3 3 7 you can change the  input-border-focus value in the Forms section of the customizer

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Why not just use     input focus          outline-color    7a0ac5

User · Answer

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

User · Answer

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

User · Answer

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

[html] Change Bootstrap input focus blue glow

Examples related to html

Examples related to css

Examples related to twitter-bootstrap