I want to show the validation errors in red. the control where there is an error want it's border to be red. For the text field the below css is working fine when there is an error.
But for Combobox. Only the list inside it is red. the Border is not turning red. Just want to make it red so that the user can see the difference when there is an error.
How to do this for combobox?
.errormessage {
color: red;
background: inherit;
border: thin solid red;
}
Thanks.I've tried visually formatting check boxes, dropdown selects and radio buttons before. I got different results in practically every browser. It stems from those types of elements being rendered more by the operating system than by the browser.
I've found borders and background colors don't get applied consistently cross-browser. I've just learned to live with it and not worry about it. If anyone else has a suggestion, great. But I haven't found a solution yet.It requires a label around the select to get this to work in IE:<!-- upto IE6 -->
<label style="display:block;width:1%;border: 1px solid red;">
<select class="errormessage" name="select1">
<option>bla</option>
<option>bla</option>
<option>bla</option>
</select>
</label>
<!-- W3C and IE7 -->
<select class="errormessage" name="select1">
<option>bla</option>
<option>bla</option>
<option>bla</option>
</select>
A little extra JavaScript or server-side coding is required to detect the browser.
Note that IE7 is the same as W3C browsers.
btw use 1px not thin for your border; different browsers different widths.
But for Combobox. Only the list inside it is red. the Border is not turning red. Just want to make it red so that the user can see the difference when there is an error.
How to do this for combobox?
.errormessage {
color: red;
background: inherit;
border: thin solid red;
}
Thanks.I've tried visually formatting check boxes, dropdown selects and radio buttons before. I got different results in practically every browser. It stems from those types of elements being rendered more by the operating system than by the browser.
I've found borders and background colors don't get applied consistently cross-browser. I've just learned to live with it and not worry about it. If anyone else has a suggestion, great. But I haven't found a solution yet.It requires a label around the select to get this to work in IE:<!-- upto IE6 -->
<label style="display:block;width:1%;border: 1px solid red;">
<select class="errormessage" name="select1">
<option>bla</option>
<option>bla</option>
<option>bla</option>
</select>
</label>
<!-- W3C and IE7 -->
<select class="errormessage" name="select1">
<option>bla</option>
<option>bla</option>
<option>bla</option>
</select>
A little extra JavaScript or server-side coding is required to detect the browser.
Note that IE7 is the same as W3C browsers.
btw use 1px not thin for your border; different browsers different widths.