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

Answer 2

http://jsfiddle.net/jmysiak/fpqp1zv3/2/

input {
  border: 1px solid #c4c4c4;
  width: 200px;
  height: 20px;
  font-size: 16px;
  padding: 4px;
  border-radius: 2px;
    -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
  transition: all ease-in-out 0.15s;
    -webkit-transition: all ease-in-out 0.15s;
      -o-transition: all ease-in-out 0.15s;}

input:focus { 
  outline: none;
  border-color: #df9eed;
  box-shadow: 0 0 10px #df9eed;}

Answer 3

Yes. You just style it. It's an outline. But you should put something cool looking that still denotes focus so that people who use it, can still see where they are on the page. They might be assisted by other devices besides the standard mouse.

a fiddle

HTML

<button class="thing">Something</button>

or

<input class="thing" type="text" />

CSS

.thing {
    border: 1px solid red;
}

.thing:focus {
    outline: 0;    
    border: 1px solid blue;
}