-1

I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:

blue glow

When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??

lion
  • 97
  • 2
  • 13

2 Answers2

1

The outline glow you mentioned is called outline in CSS.

You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.

*:focus{
    outline: red; /* Your color */
  }
Allan Jebaraj
  • 1,062
  • 8
  • 25
  • This removes it completely and I think it is better for the sake of black, white and purple being used. But it would be better for users navigating with keyboard to know which is the active dom element in a way. The glow is a good idea. Just the color is not matching the theme. I would need to know this because it has to be different for the inverted color light version. Thanks for your input!! – lion Jan 09 '19 at 14:03
  • Please add some code to your question or perhaps put it up in a fiddle? – Allan Jebaraj Jan 09 '19 at 14:09
  • I ended up using *:focus. The answer was in my question, really. To select all for :focus and set the rules. Thanks!! – lion Jan 09 '19 at 14:35
1

*:focus is what you are looking for:

*:focus {
    box-shadow: 0 0 0 .2rem red !important;
}

you could override it using !important; like i did.

jsadev.net
  • 2,800
  • 1
  • 16
  • 28
  • This does not change the color. Thanks! – lion Jan 09 '19 at 14:02
  • my fault. using this with `.btn` only changes the focus color on the buttons. you have to select your nav-item. :) – jsadev.net Jan 09 '19 at 14:24
  • take a look at my updated answer. if you get stuck again, let us see some code. – jsadev.net Jan 09 '19 at 14:26
  • Thanks I used /* remove the bootstrap outline or change color */ *:focus{ border-color: rgba(121, 62, 165, 1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(121, 62, 165, 1); outline: 0 none !important; } Because such styling is used for my select options, inputs, etc. Now everything matches perfectly!! Thanks guys! – lion Jan 09 '19 at 14:36