Disabling Webkit Form Input Shadow

Question

Possible Duplicate:
How to remove border around text/input boxes? (Chrome)

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.

It's called a frame or border, not a shadow. – SLaks Mar 03 '10 at 16:17 — SLaks, Mar 03 '10 at 16:17

score 30 · Accepted Answer · answered Mar 03 '10 at 16:17

30

Try this:

input:focus {
    outline: none;
}

answered Mar 03 '10 at 16:17

Crozin

43,890
13
88
135

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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.

Disabling Webkit Form Input Shadow

2 Answers2