Is there a way to change the -webkit-focus-ring-color?

Question

How do I change the color of -webkit-focus-ring-color? Chrome has a light blue that clashes with my CSS, I'd like to change it to another color hex but keep the rest of the style (faded edge, width) the same.

Also, is there an important reason this is a bad idea? Thanks?

Answer 1

The following css should do for Chrome (changing just the colour of the outline):

.thing:focus {
  outline-color: [MY_COLOUR];
}

If you want consistent css across browsers, you'd be better off writing your own complete style and probably also including a css reset before that.

If you're happy with the browser focus style and just want to change the colour, the above should do. You might also want to do some quick research to see what the default focus style is for other browsers (maybe some use border?) and set those colours as well.

If you want to emulate the chrome style across all browsers, try this (from the chrome user-agent stylesheet):

.thing:focus {
  outline: [My_COLOUR] auto 5px;
}