Css to change button appearance

[Dave]

Hello, I would like to configure the menu button to only show the Content text and caret, no other decoration (no outline, no background color, no visual changes on hover or click, etc.). Is that possible? Thank you.

[YuvanShankar Arunagiri]

Hi Dave,

We have checked your reported query and prepared the sample based on your requirement. We can achieve your requirement by using below CSS style. And rgb(240,240,240) is default color of the button.

@using Syncfusion.Blazor.SplitButtons

 

<SfDropDownButton Content="Edit">

    <DropDownMenuItems>

        <DropDownMenuItem Text="Cut"></DropDownMenuItem>

        <DropDownMenuItem Text="Copy"></DropDownMenuItem>

        <DropDownMenuItem Text="Paste"></DropDownMenuItem>

    </DropDownMenuItems>

</SfDropDownButton>

 

<style>

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

        background-color: rgb(240,240,240) !important;

        border: none !important;

    }

 

        .e-dropdown-btn:focus, .e-dropdown-btn:active, .e-dropdown-btn:hover,

        .e-btn:focus, .e-btn:active, .e-btn:hover {

            background-color: rgb(240,240,240) !important;

            box-shadow: none !important;

        }

</style>

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

[Dave]

Thank you, your solution works great.

Another question: Is there a way to move the caret to the left of the text in the button? I could probably use RTL if there is a way to left-justify the menu items. Thanks again.

[Dave]

Never mind, I figured out how to make a left-side caret: hide the default caret and add a caret-shaped icon.

[YuvanShankar Arunagiri]

Hi Dave,

Thanks for your update. Please let us know if you have any other queries.

Regards,

YuvanShankar A