Get rid of ugly yellow form fields with CSS

June 25, 2009

Why do some fields in the online form have an ugly yellow background?

The culprit is the the Google toolbar that people often install in their browser. Part of the AutoFill feature is to highlight in yellow, #FFFF80, the fields that AutoFill can fill. These are form fields with names like “Name” and “Email”.

How do I get rid of the yellow?

You can specify a background color to the form field. Not just specify, but really, really specify with the !important css hack.

Add this code to your css:

/* non-yellow autocomplete */
input { background-color: #ffffff !important; }

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)

Facebook comments:

{ 5 comments… read them below or add one }

1 Max@Website Hosting June 26, 2009 at 12:48 pm

Great tip, thanks for sharing. Just so you know though, you’re site doesn’t have this code active. Both the comment section and newsletter signup have that ugly yellow color. :p

2 Shanna June 26, 2009 at 1:18 pm

I bet you are using Firefox on a Mac.

**Disclaimer**
This works for IE, Chrome, Safari, and Firefox on a PC, but not Firefox on a Mac.

3 Max@Website Hosting June 29, 2009 at 12:13 pm

Actually, Firefox on a pc. :p

4 Abbey@homecoming dress July 6, 2009 at 2:23 pm

Cropping tip as I am just a bit sick with those yellow fields in my blogs. Hope to hear more tricks from you soon.

5 CDT July 15, 2009 at 6:35 pm

There is no custom favicon either. The theme is changed on this site way too often to keep up with.

Leave a Comment

CommentLuv Enabled

Previous post:

Next post: