Adjust Hidden Radio Buttons Opacity

[greggc]

Can you adjust the opacity for radio buttons that are hidden? If so, where.

[RTHOMASDESIGN]

Hey Greg,
You can use an attribute selector... but IDK what theme you're using or if the attribute is applied. Not sure by what you mean when you say "hidden". If you reply with a link to the store or PM me I can probably help you out.

.radio[disabled] {
opacity: .7;
}

-Ryan

[greggc]

Sorry for the incomplete information. Shadows theme. On certain products that have been discontinued I hide variants that have been sold out in the inventory section (Hide Out of Stock Products). Those variants that are sold out display, but the button is disabled and the attribute prompt is slightly grayed out. I would prefer to make the button a litte more inconspicuous or even add a sold out text next to the prompt.

Example link: https://www.horseandkennel.com/kerri...urner-tee.html

[RTHOMASDESIGN]

In your case you could either edit the attribute template, or use the :has pseudo-class. Something like this would work:

.x-product-layout-purchase__options-attribute label.c-form-checkbox--radio.c-form-checkbox--inline:has(:disabled) {
opacity: .5;
cursor: not-allowed;
}

Hope this helps! :)
-Ryan

[RTHOMASDESIGN]

I should note that :has is not supported by Firefox, but it is under active development... According to Mozilla, Firefox is expected to support the feature within the next two months.

[greggc]

Ryan,

I appreciate the help. Works like a charm.