12/28/2015

Styling and Disabling Autocomplete

Autocomplete is a fantastic feature that is quite useful for long forms, but it isn’t supported consistently across every browser. I wouldn’t recommend disabling this feature, but it is on occasion necessary.

There is conflicting information out there about how to do the styling of auto-completed form fields and how exactly to disable the feature. Chrome has changed it’s support of styling and the autocomplete attribute several times over the last couple years so there is a lot of outdated info.

For styling there are a couple CSS properties that can’t be styled how you would normally style them. The properties “color” and “background” aren’t styleable in Chrome because of how the browser applies the CSS to the field. You will first need to use the pseudo class :-webkit-autofill on the field type you wish to style, and then set a inset box shadow that will overlay the background color. If you want any kind of transparency or a background image in the field, good luck, because there is no way to do this at the moment.

Here is an example of how to style the background.

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
box-shadow:0 0 0 1000px white inset;
}

As for controlling text color, you will need to use the text-fill-color property instead of the color property.

input:-webkit-autofill {
-webkit-text-fill-color: #333;
text-fill-color:#333;
}

Disabling autocomplete is a bit trickier. Most browsers support the form and input attribute which should normally look like this:

autocomplete="off"

If a lot of your users are coming from browsers other than Chrome, you should be able to use the attribute for most major fields. Unfortunately, Chrome doesn’t support it at all if a user has autocomplete enabled in their settings (this is a default setting). The only way to turn it off in Chrome is by tricking the browser by using an unsupported value. For example:

autocomplete="dumb"

It’s regrettable that Chrome doesn’t support the w3 recommended usage of this attribute. If you want it disabled you will have to make a choice about what browsers you want it disabled in. For full support details check it out, here.

I hope this has been helpful!

12/28/2015

Styling and Disabling Autocomplete

Autocomplete is a fantastic feature that is quite useful for long forms, but it isn’t supported consistently across every browser. I […]

05/23/2014

Kicking the Billable Hour to the Curb

For the longest time, I have hated the billable hour, but I haven’t been able to move away from it […]

04/28/2014

Abandon Ship

Well Internet Explorer has lost face again this week, when the security firm, FireEye, discovered a major security flaw in […]

01/02/2014

Here. We. Go.

I have to admit, I don’t know if I was ready for this change in my career, but I am […]

10/08/2013

Sharp Turn Ahead

It has been a while since the last design conference I have attended. Circles was a wholly unique experience for […]

01/17/2012

A Website That Fits Its Context

I recently wrote an article for Five Q titled, “A Website That Fits Its Context: Understanding Responsive Design.” It may […]

01/11/2011

Working Hard

It has been some time since the last time I really wrote anything online. I used to write on a […]