[SalesForce] How to have a Radio Group of Button Type with gap between each button

I would like to use a Radio Group of Button Type:

<lightning:radioGroup name="radioButtonGroup"
                          label="Radio Button Group"
                          options="{! v.options }"
                          value="{! v.value }"
                          type="button"/>

But I would like each button to display separately like they are independent.

I've tried this CSS:

.THIS .slds-radio_button-group {
    border: none;
}

.THIS .slds-radio_button {
    border-radius: 0.25rem !important;
    margin-right: 10px;
}

But the corners are not curved

Best Answer

the actual dom rendered by the component does not match your selector:

enter image description here

.THIS div.slds-radio_button-group{
    border: none;
}

.THIS label.slds-radio_button__label {
    border-radius: 0.25rem !important;
}

would actually target each of your radio-buttons, additionally, you should avoid using !important

as this could potentially affect any other component that shared the selector. Instead, expand your selector to further specify the element you want to affect with your styling.

Directly modifying the css of namespaced components like this is not really recommended, and you should instead render your own lighnting:input eventhough it might mean further adding code to your javascript controller (which is not overly complicated).

modifying a lightning component css

Related Topic