Mark input field as invalid

Question

How should I mark input fields as invalid (i.e. color, background-color, border, etc.)

Currently, changing borders requires restyling of the whole input field, otherwise the border will change from the default browser styling (which is different for every browser).

Similar, changing the background-color messes up the border of input fields.

Ideally I want to be able to change background color without messing up the default browser's border styling. Is that even possible? What's a good approach here, considering I want to preserve as much of the browser's styling rules as possible?

Answer 1

I haven't found this... In any case one thing that is recommended is that you set the default border and background colour of any input so it is consistent across all browsers. If you do this you are free to style the inputs as you wish.

Above and beyond that, the standard appears to be:

• Setting both the border and background of the input
• Showing the user a message telling them what is wrong
• A nice touch can be enableing the dot points of the message to be clicked so the focus goes to the problem
• Focusing the user to the input that is incorrect
• Putting a * next to any required fields.

Getting back to the border, there are standard colours which seem to be used by most people which I can provide if you like:

border:1px solid #CC0000; 
background-color:#ffeeee;

Hope that helps. Let me know if you need more or if I haven't quite addressed what you where after.