CSS - Div focus change blue border highlight color

Question

I have div with tabstop index set. When on focus there is currently a blue border highlight. Is it possible to change this highlight color? And if so can it be done purely in CSS?

Below is what I've tried so far. Also JsFiddle here

Many thanks in advance.

HTML

<div class="test" tabindex="0">
Click Me to Focus
</div>

CSS

.test: focus {
  border: 1px solid black!important;
}

Answer 1

you can set outline-color: black on :focus

 body { padding: 0; margin: 0; }.test:focus { outline-color: black; }

 <div class="test" tabindex="0">Click Me to Focus</div>

Answer 2

Please put this code

.test{border: 1px solid transparent;}
.test:focus{
  outline: none;
  border-color: #000000;
 }

It does not border it outlines when you focus on it. So remove the outline and set border on focus or hover whenever you want.

Answer 3

You can use this code

 body { padding: 0; margin: 0; }.test:focus { border: 1px solid black;important: outline;none: box-shadow;none; }

 <div class="test" tabindex="0">Click Me to Focus</div>

Answer 4

Actually, it is the outline-color property which is set to bluish color by the browser.

You can use Chrome Dev Tools, Select an element and then alter it state to focus to view which styles are being applied to it.

You can go to the computed styles tab of the element to view in detail

As the answers above, you can set the outline-color property to change its color.

outline-color: red 

Answer 5

Remove gap between: and focus text. use this:

.test:focus {
  border: 1px solid black!important;
  outline: 0;
}

Answer 6

remove the space before focus...it will be like this:

.test:focus {
  border: 1px solid black;
  outline: none !important;
}

Answer 7

You can use following code.

.test{border: 1px solid transparent;}
.test:focus{
  outline: 0px none;
  border-color: #000000;
 }