Entry
How can I set the background color of a radio button?
How can I change the background color of a radio button?
Mar 31st, 2000 11:13
Martin Honnen,
NN4+ and IE4+ allow the use of css to set the background color of a
radio button:
<INPUT TYPE="radio" STYLE="background-color: lime;" ...>
IE4+ and NN6 also allow to change that value with JavaScript, for
instance in the onclick handler:
<HTML>
<HEAD>
<SCRIPT>
function setColorRadioGroup (radioGroup, checkedColor, uncheckedColor) {
if (!radioGroup.length && radioGroup.style) {
if (radioGroup.checked)
radioGroup.style.backgroundColor = checkedColor;
else
radioGroup.style.backgroundColor = uncheckedColor;
}
else if (radioGroup[0].style)
for (var r = 0; r < radioGroup.length; r++)
if (radioGroup[r].checked)
radioGroup[r].style.backgroundColor = checkedColor;
else
radioGroup[r].style.backgroundColor = uncheckedColor;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formName">
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Kibo"
STYLE="background-color: lime;"
ONCLICK="setColorRadioGroup(this.form
[this.name], 'red', 'lime');"
>
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Xibo"
STYLE="background-color: lime;"
ONCLICK="setColorRadioGroup(this.form
[this.name], 'red', 'lime');"
>
<INPUT TYPE="radio" NAME="aRadioGroup" VALUE="Maho"
STYLE="background-color: lime;"
ONCLICK="setColorRadioGroup(this.form
[this.name], 'red', 'lime');"
></FORM>
</BODY>
</HTML>
