cssjsflabelselectoneradio

Add styling to label generated by selectOneRadio

How to add radio-inline control-label style classes to the label generated by this code?

<h:selectOneRadio>
    <f:selectItem itemValue="0" itemLabel="Male" />
    <f:selectItem itemValue="1" itemLabel="Female" />
</h:selectOneRadio>
Solution

  • You can use enabledClass and disabledClass attributes for this. They will be applied on the rendered label. Assuming that you don't have disabled items, this should do.

    <h:selectOneRadio enabledClass="radio-inline">
    ...
</h:selectOneRadio>

    An alternative is to redefine the CSS selector as follows in order to select and style the labels.

    <h:selectOneRadio styleClass="radio-inline">
    ...
</h:selectOneRadio>

    .radio-inline label {
    ...
}

    A completely different alternative is to manually customize the radio buttons, see also <h:selectOneRadio> renders table element, how to avoid this?