Css for targeting a radio or checklist selection [RESOLVED]

Get Help
1

I would like to highlight the current selection in a radio field, including the label. This would be dynamic based on the current user’s choice. Is there an easy way to target this via css? I was mostly thinking of bold style on the text and changing the background color slightly. I have crudely highlighted an example below.

Thanks!

image

2

Hi Marty. Changing the font to bold when it is selected is possible with some CSS:

body .gform_wrapper input[type=radio]:checked + label {
	font-weight: bold;
}

When I applied that to a form, the radio button looked like this when I selected it:

That will make the label bold when the associated radio button is selected. Giving the input and the label a background color is not currently possible with CSS. There is support for a :has pseudo-selector in CSS 4, but there is not yet widespread browser support for it. If that existed, you could give a background to the div when the radio button inside the div is selected. The best you could do right now (without JavaScript) is to give the label a background color, like this:

If you want to do that, here is the CSS:

body .gform_wrapper input[type=radio]:checked + label {
     font-weight: bold;
     background-color: #BCBCBC;
}

If you have any other questions, please let us know.

1 Like
3

This is perfect, thanks so much Chris!

1 Like
4

You’re welcome.