Style and Appearance in Blazor AutoComplete Component

8 Aug 202315 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the appearance of container element

You can customize the appearance of the container element within the autocomplete component by targeting its CSS class .e-input, which indicates the parent element of the input, and allows you to apply any desired styles to the component.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
        .e-ddl.e-input-group.e-control-wrapper .e-input {
        font-size: 20px;
        font-family: emoji;
        color: #ab3243;
        background: #32a5ab;
    }
    </style>

    Blazor AutoComplete container element customization

    Customizing the dropdown icon’s color

    You can customize the dropdown icon by targeting its CSS class .e-ddl-icon.e-icons, which indicates the icon element displayed within the autocomplete component, and setting the desired color to the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px" ShowPopupButton="true">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-ddl .e-input-group-icon.e-ddl-icon.e-icons, .e-ddl .e-input-group-icon.e-ddl-icon.e-icons:hover {
        color: #bb233d;
        font-size: 13px;
    }
    </style>

    Blazor AutoComplete icon color

    Customizing the focus color

    You can customize the component color when it is focused by targeting its CSS class .e-input-focus::after, which indicates the input element when it is focused, and set the desired color to the background property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .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;
    }
    </style>

    Blazor AutoComplete focus color

    Customizing the outline theme’s focus color

    You can customize the color of the autocomplete component when it is in a focused state and rendered with an outline theme, by targeting its CSS class e-outline which indicates the input element when it is focused, and allows you to set the desired color to the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px" CssClass="e-outline">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),.e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
        border-color: #b1bd15;
        box-shadow: inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15;
    }
    </style>

    Blazor AutoComplete focusing color outline theme

    Customizing the disabled component’s text color

    You can customize the text color of a disabled component by targeting its CSS class .e-input[disabled], which indicates the input element in a disabled state, and set the desired color to the -webkit-text-fill-color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px" Enabled="false">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-input-group.e-control-wrapper .e-input[disabled] {
        -webkit-text-fill-color: #0d9133;
    }
    </style>

    Blazor AutoComplete with Disabled component text color

    Customizing the float label element’s focusing color

    You can change the text color of the floating label when it is focused by targeting its CSS classes .e-input-focus and .e-float-text.e-label-top. These classes indicate the floating label text while it is focused and set the desired color using the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Inputs;
    
    <SfAutoComplete TValue="string" TItem="Country" Placeholder="e.g. Australia" DataSource="@LocalData" Width="300px" FloatLabelType="FloatLabelType.Auto">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before,.e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after,.e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
        background-color: #2319b8;
    }
    
    .e-ddl.e-lib.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus .e-float-text.e-label-top {
        color: #2319b8;
    }
    </style>

    Blazor AutoComplete with float label focusing color

    Customizing the color of the placeholder text

    You can change the color of the placeholder by targeting its CSS class input.e-input::placeholder, which indicates the placeholder text, and set the desired color using the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    
    <SfAutoComplete TValue="string" TItem="Country"  Placeholder="Select a game" DataSource="@LocalData" Width="300px" >
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-ddl.e-input-group input.e-input::placeholder {
        color: red;
    }
    </style>

    Blazor AutoComplete with color placeholder

    Customizing the placeholder to add mandatory indicator(*)

    The mandatory indicator * can be applied to the placeholder by targeting its CSS class .e-float-text::after using the content style.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Inputs;
    
    <SfAutoComplete TValue="string" TItem="Country"  Placeholder="Select a game" DataSource="@LocalData" Width="300px" FloatLabelType="FloatLabelType.Auto">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-input-group.e-control-wrapper.e-control-container.e-float-input .e-float-text::after {
        content: "*";
        color: red;
    }
    </style>

    Blazor AutoComplete with mandatory indicator placeholder

    Customizing the text selection color

    The appearance of a selected item within a autocomplete component can be customized by targeting the CSS class input.e-input::selection and set the desired background color and text color. This customization will only be applied when the item is selected manually. To achieve this, use the background-color and color properties of the CSS class input.e-input::selection.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country"  Placeholder="Select a game" DataSource="@LocalData" Width="300px">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-ddl.e-input-group input.e-input::selection {
        color: red;
        background: yellow;
    }
    </style>

    Blazor ComboBox with customizing the focus, hover and active item color

    Customizing the background color of focus, hover, and active items

    You can customize the background color and text color of list items within the autocomplete component when they are in a focused, active, or hovered state by targeting the CSS classes .e-list-item.e-item-focus, .e-list-item.e-active, and .e-list-item.e-hover, and set the desired color to the background-color and color properties.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Inputs;
    
    <SfAutoComplete TValue="string" TItem="Country"  Placeholder="Select a game" DataSource="@LocalData" Width="300px">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
        background-color: #1f9c99;
        color: #2319b8;
    }
    </style>

    Blazor AutoComplete with customizing the focus, hover and active item color

    Customizing the appearance of pop-up element

    You can customize the appearance of the popup element within the autocomplete component by targeting the CSS class .e-list-item.e-item-focus, which indicates the list item element when it is focused, and and allows you to apply any desired styles to the component.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="Country"  Placeholder="Select a game" DataSource="@LocalData" Width="300px">
        <AutoCompleteFieldSettings Value="Name" />
    </SfAutoComplete>
    
    @code {
    
        public class Country
        {
            public string Name { get; set; }
            public string Code { get; set; }
        }
    
        List<Country> LocalData = 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" },
            new Country() { Name = "Denmark", Code = "DK" }
        };
    }
    
    <style>
    .e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
        background-color: #29c2b8;
        color: #207cd9;
        font-family: emoji;
        min-height: 29px;
    }
    </style>

    Blazor AutoComplete with customizing popup color

    Adding search icon in the Blazor AutoComplete component.

    You can add the search icon to the AutoComplete component by overriding the content of the existing icon. The following code demonstrates how to add a search icon to the AutoComplete component.

    @using Syncfusion.Blazor.DropDowns
    
    <SfAutoComplete TValue="string" TItem="GameFields" Width="300px" ShowPopupButton="true" Placeholder="e.g. Basketball" DataSource="@Games">
        <AutoCompleteFieldSettings Value="Text"></AutoCompleteFieldSettings>
    </SfAutoComplete>
    
    <style>
        .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before {
            content: '\e724';
            font-family: 'e-icons';
            font-size: 16px;
            opacity: 0.4;
        }
    </style>
    
    @code{
        public class GameFields
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        public List<GameFields> Games = new List<GameFields>()
        {
            new GameFields(){ ID= "Game1", Text= "American Football" },
            new GameFields(){ ID= "Game2", Text= "Badminton" },
            new GameFields(){ ID= "Game3", Text= "Basketball" },
            new GameFields(){ ID= "Game4", Text= "Cricket" },
            new GameFields(){ ID= "Game5", Text= "Football" },
        };
    }

    Blazor AutoComplete Search Icon