Disabling Webkit Form Input Shadow

Question

Is there a way to disable the colored shadow generated by Webkit browsers when a form element receives focus? It's yellow in Chrome and blue in Safari, and gets in the way of any custom focus styles I try to implement.

Answer 1

Try this:

input:focus {
    outline: none;
}

Answer 2

You can try outline: none but please note that this is generally not really desirable for usability reasons. Always keep Jakob Nielsen's "Law of the Web User Experience" in mind:

Users spend most of their time on other websites.

This means that they form their expectations for your site based on what's commonly done on most other sites. If you deviate, your site will be harder to use and users will leave.