asked on Change label background color on radio select
Hi,
I have this html code:
And this CSS (just a part of it):
- How can I change background color the label, when the input/radio is placed within it?
I have this html code:
<label for="y1" class="radio_btn radio1">
<input id="y1" name="connection_port_bot_angle" value="0" type="radio" class="r-input" <?php cps_checked(0, $conf['connection_port_bot_angle']); ?>>
</label>
And this CSS (just a part of it):
#cportsettings .r-input {
margin: 8px;
}
#cportsettings .radio_btn {
background: #e0e0e0;
border: 1px solid #7b7b7b;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px #aaa;
-webkit-box-shadow: 0px 0px 8px #aaa;
box-shadow: 0px 0px 8px #aaa;
}
#cportsettings .radio1 {
position: absolute;
top: 3px;
left: 98px;
z-index: 100;
}
- How can I change background color the label, when the input/radio is placed within it?
CSS
Last Comment
COBOLdinosaur
.radio_btn {
background-color: red;
}
background-color: red;
}
ASKER
COBOLdinosaur; I was just referring to my input being placed within <label> tags, and the label need to change background when input radio is selected.
ASKER
Omer-Pitou; Background need to be changed when radio is selected :)
Give the label an id for easy reference and then use an on click for the radio
Cd&
<label id="radlabel" for="y1" class="radio_btn radio1">
<input id="y1" name="connection_port_bot_angle" value="0" type="radio" class="r-input"
onclick="document.getElementById('rsdlabel').style.backgroundColor='blue';"
<?php cps_checked(0, $conf['connection_port_bot_angle']); ?>>
</label>
Cd&
ASKER
that will not change background on the default selected one upon and will not de-select when a new radio is selected.
ASKER
Is it possible to make something like this with CSS:
"if radio is checked, then set background color of <label>"?
With this html setup:
"if radio is checked, then set background color of <label>"?
With this html setup:
<label for="y1" class="radio_btn radio1">
<input id="y1" name="connection_port_bot_angle" value="0" type="radio" class="r-input" <?php cps_checked(0, $conf['connection_port_bot_angle']); ?>>
</label>
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
Cd&