Change DropDownMenu Caret Icon Color

[slynch]

Trying to figure out how to add css to change the dropdown caret to be white.

e-btn-icon e-icons e-caret

/* Customization for Dropdown Button */

.e-dropdown-btn, .e-dropdown-btn.e-btn {

/* To change Backround*/

background-color: #1E88E5;

/* To change Text color*/

color: white;

font-size: 14px;

}

[Gayathri KarunaiAnandam]

Hi slynch, 

 

We have checked your reported query. We can change the color of Dropdown menu caret icon by overriding the default CSS as demonstrated in the below code snippet. 

 

@using Syncfusion.Blazor.SplitButtons 

<SfDropDownButton Content="Actions"> 

    <DropDownMenuItems> 

        <DropDownMenuItem Text="Dashboard"></DropDownMenuItem> 

        <DropDownMenuItem Text="Notifications" ></DropDownMenuItem> 

        <DropDownMenuItem Text="User Settings"></DropDownMenuItem> 

        <DropDownMenuItem Text="Log Out" ></DropDownMenuItem> 

    </DropDownMenuItems> 

</SfDropDownButton> 

 

<style> 

    .e-btn-icon.e-icons.e-caret { 

        color: white; 

    } 

    .e-control.e-btn.e-dropdown-btn { 

        background-color: #1E88E5; 

        color: white; 

        font-size: 14px; 

    } 

</style> 

 

For your reference, we have prepared a sample based on this scenario. Please check the below link. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164528/ze/DropDown_Icon_Css1813381391 

 

Please check the above link and get back to us, if you need further assistance. 

 

Regards, 

Gayathri K