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;
}
Improve this question
3
  • @TusharSharma I already tried that but it did not work.
    – Indresh Bhargav
    Commented Mar 16, 2021 at 12:40
  • You say that you've tried display: inline !important; but your code doesn't show it. Have you actually tried it?
    – David Cheng
    Commented Mar 16, 2021 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?
    – Indresh Bhargav
    Commented Mar 16, 2021 at 17:18

1 Answer 1

Reset to default
4

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged .