Css – How to stop Chrome from yellowing the site’s input boxes

cssgoogle-chromehtml-inputvalidation

Among other text and visual aids on a form submission, post-validation, I'm coloring my input boxes red to signify the interactive area needing attention.

On Chrome (and for Google Toolbar users) the auto-fill feature re-colors my input forms yellow. Here's the complex issue: I want auto-complete allowed on my forms, as it speeds users logging in. I am going to check into the ability to turn the autocomplete attribute to off if/when there's an error triggered, but it is a complex bit of coding to programmatically turn off the auto-complete for the single affected input on a page. This, to put it simply, would be a major headache.

So to try to avoid that issue, is there any simpler method of stopping Chrome from re-coloring the input boxes?

[edit] I tried the !important suggestion below and it had no effect. I have not yet checked Google Toolbar to see if the !important attribute would work for that.

As far as I can tell, there isn't any means other than using the autocomplete attribute (which does appear to work).

Best Answer

Set the CSS outline property to none.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

In cases where the browser may add a background color as well this can be fixed by something like

:focus { background-color: #fff; }

Related Solutions

How does the SQL injection from the “Bobby Tables” XKCD comic work

It drops the students table.

The original code in the school's program probably looks something like

q = "INSERT INTO Students VALUES ('" + FNMName.Text + "', '" + LName.Text + "')";

This is the naive way to add text input into a query, and is very bad, as you will see.

After the values from the first name, middle name textbox FNMName.Text (which is Robert'); DROP TABLE STUDENTS; --) and the last name textbox LName.Text (let's call it Derper) are concatenated with the rest of the query, the result is now actually two queries separated by the statement terminator (semicolon). The second query has been injected into the first. When the code executes this query against the database, it will look like this

INSERT INTO Students VALUES ('Robert'); DROP TABLE Students; --', 'Derper')

which, in plain English, roughly translates to the two queries:

Add a new record to the Students table with a Name value of 'Robert'

and

Delete the Students table

Everything past the second query is marked as a comment: --', 'Derper')

The ' in the student's name is not a comment, it's the closing string delimiter. Since the student's name is a string, it's needed syntactically to complete the hypothetical query. Injection attacks only work when the SQL query they inject results in valid SQL.

^{^{Edited again as per dan04's astute comment}}

Google-chrome – Removing input background colour for Chrome autocomplete

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

Best Answer

Related Solutions

How does the SQL injection from the “Bobby Tables” XKCD comic work

Google-chrome – Removing input background colour for Chrome autocomplete

Related Topic