Change styles of radio container when radio is checked or hovered

Get Help
, ,
1

I need to change the styles of 2 radio containers when the radio option has been clicked or hovered

.gchoice_1_15_0, .gchoice_1_15_1 {
	width: 48%;
	color: #58595B;
    border: 1px solid #E4E4E4;
    border-radius: 10px;
	padding-left: 1em;
	background: #fff;
	transition: all ease-in-out .3s;
	box-shadow: none;
}

//Yes option
<div class="gchoice gchoice_1_15_0">
		<input class="gfield-choice-input" name="input_15" type="radio" value="Yes" id="choice_1_15_0" onchange="/*gformToggleRadioOther( this )*/">
		<label for="choice_1_15_0" id="label_1_15_0">Yes</label>
</div>

//No option
<div class="gchoice gchoice_1_15_1">
		<input class="gfield-choice-input" name="input_15" type="radio" value="No" id="choice_1_15_1" onchange="/*gformToggleRadioOther( this )*/">
		<label for="choice_1_15_1" id="label_1_15_1">No</label>
</div>

Once any of the options are checked or hovered I need to change the styles of the correct container:

If the “Yes” option is checked, change .gchoice_1_15_0 to

background: #EF8B22;
border: 1px solid #EF8B22;
box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);

If the “No” option is checked, change .gchoice_1_15_1 to

background: #EF8B22;
border: 1px solid #EF8B22;
box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);

I tried with this CSS but didn’t work:

#choice_1_15_0:checked ~ .gchoice_1_15_0 {
	background: #EF8B22;
    border: 1px solid #EF8B22;
    box-shadow: 0px 0px 6px 0px rgb(239 139 4 / 30%);
}

How can I achieve that?

2

:checked is a CSS pseudo-class selector for inputs, so you can’t change the parent div styles using that, you would need to use some custom JS.

The following link has useful information about this: Is there a CSS parent selector? - Stack Overflow

3

You might this action useful when pulling together some javascript: gform_input_change

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.