Style and Appearance in Dropdown List

15 Dec 202224 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.

Read-only mode

Specify the boolean value to the Readonly whether the DropDownList allows the user to change the value or not.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" @bind-Value="GameValue" Readonly=true>
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        
    }

    Blazor DropDownList with Readonly mode

    Disabled state

    Specify the boolean value to the Enabled property that indicates whether the component is enabled or not.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" @bind-Value="GameValue" Enabled=false>
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        
    }

    Blazor DropDownList with Disabled

    Customizing the disabled component’s text color

    Use the following CSS to customize the text color when the component is disabled.

    .e-input-group.e-control-wrapper .e-input[disabled] {
        -webkit-text-fill-color: #0d9133;
    }

    Blazor DropDownList with Disabled component text color

    Show the custom icon in dropdown icon

    Change the dropdown icon by overriding the style content.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" @bind-Value="GameValue">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        
    }
    
    <style> 
        .e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before { 
            content: '\e304'; 
        } 
    </style>

    Blazor DropDownList with dropdown icon

    Change the dropdown icon for the particular component using the CssClass property and add style to the custom class which is mapped to CssClass.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" @bind-Value="GameValue" CssClass="e-custom">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        
    }
    
    <style> 
        .e-custom.e-ddl.e-input-group.e-control-wrapper .e-ddl-icon::before { 
            content: '\e304'; 
        } 
    </style>

    Blazor DropDownList with dropdown icon using CssClass

    Customizing the appearance of container element

    Use the following CSS to customize the appearance of container element.

    .e-ddl.e-input-group.e-control-wrapper .e-input {
        font-size: 20px;
        font-family: emoji;
        color: #ab3243;
        background: #32a5ab;
    }

    Blazor DropDownList container element customization

    Customizing the dropdown icon’s color

    Use the following CSS to customize the dropdown icon’s color.

    .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;
    }

    Blazor DropDownList icon color

    Customizing the focus color

    Use the following CSS to customize the focusing color of input element.

    .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;
    }

    Blazor DropDownList focus color

    Customizing the outline theme’s focus color

    Use the following CSS to customize the focusing color of outline theme.

    .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;
    }

    Blazor DropDownList focusing color outline theme

    Use the e-outline to the CssClass property to achieve the outline theme

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Inputs;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" Width="300px" CssClass="e-outline" FloatLabelType="FloatLabelType.Always">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
      public class Games
      {  
        public string ID { get; set; }
        public string Text { get; set; }
      }
      List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
      };
    }

    Blazor DropDownList with outline theme

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

    Use the following CSS to customize the background color of the focus, hover, and active items.

    .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;
    }

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

    Customizing the appearance of pop-up element

    Use the following CSS to customize the appearance of popup element.

    .e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
        background-color: #29c2b8;
        color: #207cd9;
        font-family: emoji;
        min-height: 29px;
    }

    Blazor DropDownList with customizing popup color

    Change the HTML attributes

    Add the additional html attributes such as styles, class, and more to the root element using the HTMLAttributes property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" HtmlAttributes="@htmlAttribute" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
        {
            {"class", "e-games" },
            {"name", "games" },
            {"style", "background-color: yellow; text-align: right" },
            {"title", "Syncfusion DropDownList" }
        };
    
    }

    Blazor DropDownList with different font family

    Set the various font family for dropdown list elements

    The font-family of the dropdown list can be changed by overriding using the following selector. The overridden can be applied to specific component by adding a class name through the CssClass property.

    In the following sample, the font family of the Dropdownlist, ListItem text in dropdownlist and filterInput text are changed.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList @ref="dropdown" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" CssClass="e-custom" AllowFiltering=true FilterBarPlaceholder="Search here">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        SfDropDownList<string, Games> dropdown;
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
    }
        
    <style>
        /*Text in DropDownList*/ 
    .e-custom.e-input-group input.e-dropdownlist { 
        font-family: cursive; 
    } 
    /*Item Text in DropDownList*/ 
    .e-custom.e-popup-open { 
        font-family: cursive; 
    } 
    /*Dropdownlist filterInput font-family*/ 
    .e-custom span.e-input-group.e-control-container.e-control-wrapper { 
        font-family: cursive; 
    } 
    
    </style>

    Blazor DropDownList with different font family

    Show tooltip on list item

    You can achieve this behavior by integrating the tooltip component. When the mouse hovers over the DropDownList option, a tooltip appears with information about the hovered list item.

    The following code demonstrates how to display a tooltip when hovering over the DropDownList option.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Popups;
    
    <SfTooltip @ref="TooltipObj" ID="Tooltip" Target=".e-list-item .name[title]">
    </SfTooltip>
    
    <SfDropDownList TItem="GameFields" TValue="string" Placeholder="Select a game" DataSource="@Games">
        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
        <DropDownListTemplates TItem="GameFields">
                <ItemTemplate>
                        <div class="name" title="@((context as GameFields).Text)"> @((context as GameFields).Text) </div>
                </ItemTemplate>
            </DropDownListTemplates>
        <DropDownListEvents TValue="string" TItem="GameFields" Opened="OnOpen" OnClose="OnClose"></DropDownListEvents>
    </SfDropDownList>
    
    @code{
    
        SfTooltip TooltipObj;
        public Boolean isOpen { get; set; } = false;
        
        public class GameFields
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        
        private 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" },
            new GameFields(){ ID= "Game6", Text= "Golf" },
            new GameFields(){ ID= "Game7", Text= "Hockey" },
            new GameFields(){ ID= "Game8", Text= "Rugby"},
            new GameFields(){ ID= "Game9", Text= "Snooker" },
            new GameFields(){ ID= "Game10", Text= "Tennis"},
        };
    
        public void OnOpen(PopupEventArgs args)
        {
            isOpen = true;
        }
    
        public void OnClose(PopupEventArgs args)
        {
            TooltipObj.CloseAsync();
        }
        
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (isOpen)
            {
                await TooltipObj.RefreshAsync();
            }
        }
    }

    Blazor DropDownList with tooltip

    Customize selected item opacity

    Set the opacity to the selected item using the following selector.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList @ref="dropdown" TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" CssClass="e-custom" AllowFiltering=true FilterBarPlaceholder="Search here">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        SfDropDownList<string, Games> dropdown;
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
    }
        
    <style>
    
    .e-dropdownbase .e-list-item.e-active,
    
    .e-dropdownbase .e-list-item.e-active.e-hover {
    
        opacity: 0.1;
    
    }
    
    </style>

    Blazor DropDownList with opacity style

    Customizing the height

    Height of dropdownlist

    Use the PopupHeight property to change the height of the popup.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" PopupHeight="500px" CssClass="e-custom">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
    }
    
    <style>
        .e-custom.e-input-group, .e-custom.e-input-group.e-control-wrapper {
            height: 50px;
        }
    
    </style>

    Blazor DropDownList with Popup height

    Width of dropdownlist

    To customize the width of the popup alone, use the PopupWidth property. By default, the popup width is set based on the component’s width. Use the Width to change the width of the component.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" Width="500px" PopupWidth="300px">
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
    }

    Blazor DropDownList with Popup Width

    Disable specfic items in dropdown list

    Prevent some items in the popup list from selecting. This can be achieved by disabling the item for a specific dropdownlist component by adding the custom class for the popup element using the CssClass property.

    In the following code, a single list Item is hidden using jsinterop.

  • CSHTML
  • @inject IJSRuntime JSRuntime;
    @using Syncfusion.Blazor.DropDowns
    
    <SfDropDownList ID="mydropdown" TValue="string" TItem="Countries" Width="300px" Placeholder="e.g. Australia" DataSource="@Country" CssClass="e-custom-class">
        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>
        <DropDownListEvents TItem="Countries" TValue="string" Opened="OnOpen"></DropDownListEvents>
    </SfDropDownList>
    
    @code {
    
        public async Task OnOpen()
        {
            await this.JSRuntime.InvokeVoidAsync("disable", "mydropdown");
        }
        public class Countries
        {
            public string Name { get; set; }
    
            public string Code { get; set; }
        }
    
        List<Countries> Country = new List<Countries>
    {
            new Countries() { Name = "Australia", Code = "AU" },
            new Countries() { Name = "Bermuda", Code = "BM" },
            new Countries() { Name = "Canada", Code = "CA" },
            new Countries() { Name = "Cameroon", Code = "CM" },
            new Countries() { Name = "Denmark", Code = "DK" },
            new Countries() { Name = "France", Code = "FR" },
            new Countries() { Name = "Finland", Code = "FI" },
            new Countries() { Name = "Germany", Code = "DE" },
            new Countries() { Name = "Greenland", Code = "GL" },
            new Countries() { Name = "Hong Kong", Code = "HK" },
            new Countries() { Name = "India", Code = "IN" },
            new Countries() { Name = "Italy", Code = "IT" },
            new Countries() { Name = "Japan", Code = "JP" },
            new Countries() { Name = "Mexico", Code = "MX" },
            new Countries() { Name = "Norway", Code = "NO" },
            new Countries() { Name = "Poland", Code = "PL" },
            new Countries() { Name = "Switzerland", Code = "CH" },
            new Countries() { Name = "United Kingdom", Code = "GB" },
            new Countries() { Name = "United States", Code = "US" },
        };
    }
    <script>
            window.disable = function (id) { 
        setTimeout(function (e) { 
            var liCollections = document.querySelectorAll('.e-popup.e-custom-class .e-list-item') 
            if (liCollections && liCollections.length > 0) 
            liCollections[1].classList.add('e-disabled'); 
            liCollections[1].classList.add('e-overlay'); 
        }, 30); 
     } 
    </script>

    Blazor DropDownList with Popup Width

    Properties

    CssClass

    Specifies the CSS class name that can be appended with the root element of the DropDownList. One or more custom CSS classes can be added to a DropDownList.

    Some of the possible values are

    • e-success, which denotes the component in success state that is added green color to the dropdownlist’s input field.
    • e-warning, which denotes the component in warning state that is added orange color to the dropdownlist’s input field.
    • e-error, which denotes the component in error state that is added red color to the dropdownlist’s input field.
    • e-outline, which supports only in material theme.
    • e-multi-column, which provides two or more columns in the popup and the column will be aligned like grid.
  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" CssClass='@CssClass'>
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string CssClass { get; set; } = "e-success";
    }

    Blazor DropDownList with CssClass property

    HtmlAttributes

    Allows additional HTML attributes such as title, name, etc., and accepts n number of attributes in a key-value pair format.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" HtmlAttributes="@htmlAttribute" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
        {
            {"class", "e-games" },
            {"name", "games" },
            {"style", "background-color: yellow; text-align: right" },
            {"title", "Syncfusion DropDownList" }
        };
    
    }

    Blazor DropDownList with different font family

    InputAttributes

    You can add the additional input attributes such as disabled, value, and more to the root element.

    If you configured both the property and equivalent input attribute, then the component considers the property value.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" InputAttributes="@inputAttribute" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        Dictionary<string, object> inputAttribute = new Dictionary<string, object>()
        {
            {"enabled", false },
            {"value","Golf"}
        };
    
    }

    Blazor DropDownList with HtmlAttributes property

    Readonly

    Specifies the boolean value whether the DropDownList allows the user to change the value.

    Default value of Readonly is false.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList TValue="string" TItem="Games" Placeholder="Select a game" Width="300px" DataSource="@LocalData" @bind-Value="GameValue" Readonly=true>
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public string GameValue { get; set; } = "Game5";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        
    }

    Blazor DropDownList with Readonly mode

    TabIndex

    Specifies the tab order of the DropDownList component.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfDropDownList  TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" TabIndex="@TabIndex" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    
    @code {
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public int TabIndex { get; set; } = 0;
    
    }

    ValueExpression

    Specifies the expression for defining the value of the bound.

    Click to refer the code for ValueExpression

    Methods

    HideSpinnerAsync()

    Hides the spinner loader.

    Declarations

    NOTE

    public Task HideSpinnerAsync()

    ShowSpinnerAsync()

    Shows the spinner loader.

    Declarations

    NOTE

    public Task ShowSpinnerAsync()

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <button @onclick="Show">Show</button>
    
    <button @onclick="Hide">Hide</button>
    
    <SfDropDownList  @ref="DDLObj" TValue="string" TItem="Games" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@GameValue" >
      <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings>
    </SfDropDownList>
    
    @code {
        SfDropDownList<string, Games> DDLObj;
    
        public string GameValue { get; set; } = "Game3";
    
        public class Games
        {  
            public string ID { get; set; }
            public string Text { get; set; }
        }
    
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public void Show () 
        {
            this.DDLObj.ShowSpinnerAsync();
        }
    
        public void Hide () 
        {
            this.DDLObj.HideSpinnerAsync();
        }
    
    }

    Show or hide spinner in Blazor DropDownList