function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Shubham Bansal 45Shubham Bansal 45 

change ligthing-tab selected tab color(which was by default blue) to another color in lwc

How to change selected tabset background color in lwc. its urgent
Best Answer chosen by Shubham Bansal 45
Shubham Bansal 45Shubham Bansal 45
For doing this we have to create alightning component and give css on that and call our lwc inside that.

All Answers

Khushmeet KaurKhushmeet Kaur
Hi Shubham,

Please use the custom CSS.
slds-tabs_default__link{
   color:red;
}
Shubham Bansal 45Shubham Bansal 45

Hi Khushmeet,

Thanks for your time.

But

It still not working.....
Khushmeet KaurKhushmeet Kaur
Hi  Shubham,
Can you please share the code so it will be helpful to resolve your issue.

Thanks
Shubham Bansal 45Shubham Bansal 45

HTML:

<template>
    <lightning-card >
        <h3 slot="title">
            <lightning-icon icon-name="standard:opportunity_splits" size="small"></lightning-icon>
            &nbsp;&nbsp;&nbsp;
            <span class="slds-text-heading_small">
                <strong>Partner Score Card</strong>
            </span>
        </h3>
            <lightning-tabset>
                <template if:true={Sections}>
                        <template for:each={Sections} for:item="item">
                            <lightning-tab key={item} label={item.name} class="tab">
                                <div style="padding: 0 3% 0 3%;">
                                <c-pscore-card-child
                                    split-field={item.name}
                                    user-ids={UserId}>
                                </c-pscore-card-child>
                            </div>
                            </lightning-tab>
                        </template>
                </template>
            </lightning-tabset>
            </lightning-card>
    </template>

 

User-added image

 

CSS:
.slds-tabs_default__link{
    color:red;
 }
Khushmeet KaurKhushmeet Kaur
Hi Shubham,

Please inspect and get the class name ..Copy paste the class name and then add color.
Let me know if this worked
Shubham Bansal 45Shubham Bansal 45
Still not working
Khushmeet KaurKhushmeet Kaur
Please try first adding in the inspect method itself , if works please implement in the org
Shubham Bansal 45Shubham Bansal 45
For doing this we have to create alightning component and give css on that and call our lwc inside that.
This was selected as the best answer