Question

Possible Duplicate:
How do I stop Chrome from yellowing my site’s input boxes?

I’ve come across a little bug that I’m unable to solve, basically I have:

    input:focus {
        border: 1px solid #38a9f0;
        -webkit-box-shadow: 0px 0px 5px rgba(56, 169, 240, 0.75);
        -moz-box-shadow: 0px 0px 5px rgba(56, 169, 240, 0.75);
        box-shadow: 0px 0px 5px rgba(56, 169, 240, 0.75);
    }

to style the boxes when a user selects it, however, chrome already has a default on focus which is yellow, so along with the above it turns it to a very dark and ugly green. Is there any way to override chromes default colours?

Regards,
Karl

Answer 1

As pointed out in this SO question here you can simply use the following CSS to override the outline, but do make sure (as you said you would) that you replace it with some indication of focus.

input[type="text"], input[type="password"], textarea, select { 
  outline: none;
}

You can simple use the outline: none; piece if that’s all you need, that is simply the way to override all of the potential outlines.