Proper DOM so we can style labels on disabled or focused radio buttons - Mendix Forum

Proper DOM so we can style labels on disabled or focused radio buttons

14

It would be great to be able to style labels on disabled radio buttons.

Currently, the DOM for radio buttons does not allow for styling labels on disabled radio buttons:

<label>

<input type=”radio” name=”2343245235-15” value=”Sales” disabled>

“Sales”
</label>

If the dom was set up properly we could use “input[type=radio][disabled] + input” to style the input text. The dom would need to be set up like this:

<input type=”radio” name=”2343245235-15” value=”Sales” disabled>

<label>Sales</label>

Here is a similar issue brought up by Jason Teunissen on focused radio buttons:

https://community.mendix.com/link/questions/90713

I am using 7.23.4 so not sure if this fix has already been implemented?

Thank you!

asked
4 answers

@Patrick Hurley, @Danny Roest thank you for the update! 

Created

Thankfully this issue has been resolved in Mendix 8.

Created

My temporary solution is to add a “no-edit” class to the radio buttons input widget. And then added disabled styles:

.no-edit & {
        label {
            cursor: not-allowed;
            input[type="radio"] { 
                background-color: #CCC;
                &:checked {
                    border: 6px solid $brand-default;
                    background-color: #FFF;
                }
            }
        }
    }

Created

Here is another example of proper DOM for radio buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio

Created