Link to home
Create AccountLog in
Avatar of kgp43
kgp43Flag for Denmark

asked on

Change label background color on radio select

Hi,

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>

Open in new window


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;
}

Open in new window


- How can I change background color the label, when the input/radio is placed within it?
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

I don't understand what you are asking.  What do you mean by "when the input/radio is placed within it?"


Cd&
Avatar of Omer-Pitou
Omer-Pitou

.radio_btn {
      background-color: red;
}
Avatar of kgp43

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.
Avatar of kgp43

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

<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>

Open in new window


Cd&
Avatar of kgp43

ASKER

that will not change background on the default selected one upon and will not de-select when a new radio is selected.
Avatar of kgp43

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:

<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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account