0

Below is the Screenshot of my lightning-checkbox-group. Instead of showing them vertically I want them aligned horizontally. I have referred several links and applied many CSS but still no luck. Can someone please help me with this. Also I want the background color and border color of the checkboxes to be changed?

enter image description here

.html

<div class="slds-align_absolute-center">
            <div class="slds-m-bottom_x-large slds-theme_default slds-form-element__control green-checkbox">
                <lightning-checkbox-group class="green-checkbox" options={objectFieldOptions} value={selectedObjectFieldValue}
                    onchange={objectFieldHandleChange} required="true">
                </lightning-checkbox-group>
            </div>
            </div>

For Bg color and border color change I tried this CSS but it's not working

.CSS

.THIS input[type=checkbox]:checked.green-checkbox{
    border-color: #00b200; 
    box-shadow: 0 0 3px #006A00; 
    background-color: rgb(0, 178, 0);
    border:1px solid;
}

.THIS .slds-checkbox {
    display: inline !important;
}

3
  • @TusharSharma I already tried that but it did not work. Mar 16 '21 at 12:40
  • You say that you've tried display: inline !important; but your code doesn't show it. Have you actually tried it? Mar 16 '21 at 14:31
  • @DavidCheng Yes I have actually tried it. I have updated my code you can check. After adding CSS class do i have to do something in HTML also so that my lightning-checkbox-group inherits the class? Mar 16 '21 at 17:18
3

You won't be able to change the display of the lightning-components-* due to Shadow DOM. You probably are better of simply iterating over an array of objects in your template to render a group of checkboxes using an slds blueprint.

<div class="slds-form-element">
<div class="slds-form-element__control">
    <div class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-unique-id-73" value="checkbox-unique-id-73" checked="" />
      <label class="slds-checkbox__label" for="checkbox-unique-id-73">
        <span class="slds-checkbox_faux"></span>
        <span class="slds-form-element__label">Checkbox Label</span>
      </label>
    </div>
  </div>
</div>

simply add your event handlers on inputChange and you should be able to modify the css freely.

Not the answer you're looking for? Browse other questions tagged or ask your own question.