Remove the inner border on both buttons

[Luis Matias]

Hi, Im trying to remove the inner border on both buttons after been selected w/o luck

code:

<SfButtonGroup Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

        <ButtonGroupButton @bind-Selected="isPorcentageDiscount" CssClass="btn-discount">%</ButtonGroupButton>

        <ButtonGroupButton CssClass="btn-amount">$</ButtonGroupButton>

</SfButtonGroup>

<style>

    .e-btn-group .e-btn.btn-discount {

        border-radius:0;

        border-color: #605e5c !important;

    }

    .e-btn-group .e-btn.btn-amount {

        border-color: #605e5c !important;

    }

    .e-btn-group > input:focus {

            border:none !important;

            outline:none !important;

            border-inline:none !important;

        }

</style>

[YuvanShankar Arunagiri]

Hi Lius,

We have checked your reported query and please use the below CSS code to achieve your requirement.

@using Syncfusion.Blazor.SplitButtons

 

<SfButtonGroup CssClass="e-remove-border" Mode="Syncfusion.Blazor.SplitButtons.SelectionMode.Single">

    <ButtonGroupButton @bind-Selected="isPercentageDiscount">%</ButtonGroupButton>

    <ButtonGroupButton>$</ButtonGroupButton>

</SfButtonGroup>

 

@code{

    private bool isPercentageDiscount = true;

 }

 

<style>

    .e-btn-group.e-remove-border input:focus + label.e-btn {

        outline: none !important;

    }

</style>

Please get back to us if you need further assistance on this.

Regards,

Yuvan Shankar A