Friday, February 4, 2011

Styles for IE 6/7 Select in MVC validation CSS

IE 6 and 7 use the in-built OS for select lists, which don't behave when using the standard styles for MVC validation:

.input-validation-error { border: 1px solid red; }

Your textboxes will receive a red outline but your select lists will not. The best way I have seen to achieve a generic cross-browser style definition is to add more css styles to handle select lists with a light-red shaded background:

select.input-validation-error { background-color:#FFA5A5; }
.input-validation-error option { background-color:white; }


Now select boxes will be marked in all browser types, and error conditions on select lists have improved visibility.

No comments: