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:
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