box-shadow on inputs in chrome [duplicate]

Question

This question already has answers here:

Closed 7 years ago.

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

Try putting !important at the end of the line in CSS. This should override the default. For instance: box-shadow: 0px 0px 5px rgba(56, 169, 240, 0.75) !important;

Answer 2

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.