Why are the options in the Products field turning grey entirely when one option is selected?

I've tried playing around with the color options in Design but I can't seem to get the options in the "Choose Your Ad" section of my form to stay lit up even after a selection is made. (Note: you must choose Personal or Business ad first to make the conditionals work.)  I wouldn't mind if the options not selected were greyed out but I at least would like for the option that IS selected to be highlighted in some way. When I click elsewhere in the form, the options light up again and I can only tell what was selected by the little "dot" toggle. Some people are confused by what they have actually selected. Just need to be pointed in the right direction as to where to make the color adjustments (and happy to hear some suggestions about what colors to use so I get the desired effect).

I was able to replicate the issue when I opened your form. Here's a screen capture:

You can fix this by inserting this CSS code:

.form-product-item.hover-product-item {
color: white;
}

Here's a guide on How-to-Inject-Custom-CSS-Codes. Here's the result:

Hope that helps. Thank you.

This is fantastic. As a follow-up, is there a way to have it grey out all the options NOT selected and just keep the one selected in white? Or is that not possible? Alternatively, is there a way to make the option that IS selected highlighted or bolded or something while the options not selected remain as is? The dot obviously marks the selection but it is not as obvious as it could be. Thank you!

Thank you for contacting us.

Kindly allow us more time to get the right CSS codes that will work for your setup.

I will update you on this thread with the right CSS for the form.

Thank you for contacting us and for your patience. I have re-looked at the issue and I have noticed the section you want to implement the changes is a payment element and some elements do not have "checked" attribute which becomes a challenge when checking if a radio button is checked hence  implementing the option of checking if radio button has been selected may pose a challenge.

I have tried adding other attributes that shows you have selected the radio button but immediately you release your mouse it disappears. This may be close to what you wanted to achieve. Kindly test it below and if you would want to implement it kindly add the following css to your form.

.form-product-item-detail:active {
    background :  #660006;
}

Below is a clone of your form with the above CSS

https://form.jotform.com/73184680407964

Kindly feel free to clone the form and use is.

Here is a guide on how to inject CSS to your form

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Kindly do let us know if the above solution would work for you.

Trevon, I see how that code makes it quickly highlight in red for a moment once selected. I like that and the only further change I wonder about is using a transparency. That is, lets say I wanted to use the color white #ffffff instead of the reddish color you used above (#660006). I would want it to be a bit transparent so if I wanted 50% transparency, I would code it #80ffffff.

But the CSS seems to only recognize the first 6 characters after the hashtag. Is this a limitation or am I missing something here about using a transparency prefix in front of the color?

If you want to make the background transparent you can use the Opacity property. — https://www.w3schools.com/css/css_image_transparency.asp

And to put more emphasis on the selected option, here is my suggestion:

.form-product-item-detail:active {

    background: #e5eeef;

    opacity: 0.5;

    color: black;

    font-weight: bold;

    font-size: 18px;

}

I hope this helps. If you have other questions or concerns, please feel free to contact us again anytime.