Dropdown css affecting grid pagination

[Pavel]

I have a SFDropdownlist component that I want to apply some css styling to 

.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before, .e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {
    background: #c000ff;
}

However I also have a Grid component with pagination. The above css affects both the Grid and the dropdownlist.

I would like the css to only affect the dropdown not the grid pagination selector.

[Sureshkumar P]

Hi Pavel,

We suggest you using the CssClass property to customize the standalone dropdownlist component style without affect all other components.

Find the code example here:

<SfDropDownList TValue="string[]" TItem="Country" DataSource="@Countries" CssClass="e-ddl-style">

    <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

</SfDropDownList>

 

@code {

    public class Country

    {

        public string Name { get; set; }

        public string Code { get; set; }

    }

    List<Country> Countries = new List<Country>

    {

        new Country() { Name = "Australia", Code = "AU" },

        new Country() { Name = "Bermuda", Code = "BM" },

        new Country() { Name = "Canada", Code = "CA" },

        new Country() { Name = "Cameroon", Code = "CM" },

    };

}

 

<style>

    .e-ddl-style.e-ddl.e-input-group.e-control-wrapper.e-input-focus::before,

    .e-ddl-style.e-ddl.e-input-group.e-control-wrapper.e-input-focus::after {

        background: #c000ff;

    }

</style>

Regards,

Sureshkumar P