# Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET MVC DropDownList.

For a live example, visit the [Appearance Demo of the DropDownList](https://demos.telerik.com/aspnet-mvc/dropdownlist/appearance).

## Options

The DropDownList supports the following styling options:

* [`Size`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/appearance#size)—configures the overall size of the component.
* [`Rounded`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/appearance#rounded)—configures the border radius of the component.
* [`FillMode`](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/editors/dropdownlist/appearance#fillmode)—configures how the color is applied to the component.

### Size

The `Size` option controls the size of the DropDownList. The `k-picker-{size}` class, which is applied to the wrapping span element of the DropDownList, reflects the value of the `Size` option.

The following values are available for the `Size` option:

* `Small`—small size (applies the `k-picker-sm` class to the wrapping span element)
* `Medium`—medium size (applies the `k-picker-md` class to the wrapping span element)
* `Large`—large size (applies the `k-picker-lg` class to the wrapping span element)
* `None`—unset.

The following example demonstrates how to set `Size` in the declaration of the DropDownList:

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("categories")
        .Size(ComponentSize.Medium)
        .HtmlAttributes(new { style = "width:100%" })
        .OptionLabel("Select category...")
        .DataTextField("CategoryName")
        .DataValueField("CategoryId")
        .Height(310)
        .Template("<span class=\"k-state-default\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" +
            "<span class=\"k-state-default\" style=\"padding-left: 15px;\"><h3>#: data.CategoryName #</h3></span>")
        .ValueTemplate("<span class=\"selected-value\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" + "<span>#:data.CategoryName#</span>")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Overview_Get_Categories", "DropDownList");
            });
        })
        .FooterTemplate("Total number of <strong>#: instance.dataSource.total() #</strong> categories found")
    )
```

The default `Size` value is `Medium` and it is applied to the wrapping span element through the `k-picker-md` class.

```html
<span class="k-dropdownlist k-picker k-picker-md">
</span>
```

### Rounded

The `Rounded` option controls the border radius of the DropDownList. The class that corresponds to the `Rounded` option is `k-rounded-{rounded}`.

The following values are available for the `Rounded` option:

* `Small`—small border radius (applies the `k-rounded-sm` class to the wrapping span element)
* `Medium`—medium border radius (applies the `k-rounded-md` class to the wrapping span element)
* `Large`—large border radius (applies the `k-rounded-lg` class to the wrapping span element)
* `Full`—largest border radius (applies the `k-rounded-full` class to the wrapping span element)
* `None`—unset.

The following example demonstrates how to set `Rounded` in the declaration of the DropDownList:

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("categories")
        .Rounded(Rounded.Medium)
        .HtmlAttributes(new { style = "width:100%" })
        .OptionLabel("Select category...")
        .DataTextField("CategoryName")
        .DataValueField("CategoryId")
        .Height(310)
        .Template("<span class=\"k-state-default\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" +
            "<span class=\"k-state-default\" style=\"padding-left: 15px;\"><h3>#: data.CategoryName #</h3></span>")
        .ValueTemplate("<span class=\"selected-value\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" + "<span>#:data.CategoryName#</span>")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Overview_Get_Categories", "DropDownList");
            });
        })
        .FooterTemplate("Total number of <strong>#: instance.dataSource.total() #</strong> categories found")
    )
```

> When not explicitly set, the applied theme controls the default border radius.

```html
<span class="k-dropdownlist k-input k-rounded-md">
</span>
```

### FillMode

The `FillMode` option controls the way color is applied to the rendered DropDownList. The `k-picker-{fillMode}` class, which is applied to the wrapping span element of the DropDownList, reflects the value of the `FillMode` option.

The following values are available for the `FillMode` option:

* `Solid`—applies the `k-picker-solid` class to the wrapping span element
* `Flat`—applies the `k-picker-flat` class to the wrapping span element
* `Outline`—applies the `k-picker-outline` class to the wrapping span element
* `None`—unset.

The following example demonstrates how to set `FillMode` in the declaration of the DropDownList:

```Razor HtmlHelper
    @(Html.Kendo().DropDownList()
        .Name("categories")
        .FillMode(FillMode.Solid)
        .HtmlAttributes(new { style = "width:100%" })
        .OptionLabel("Select category...")
        .DataTextField("CategoryName")
        .DataValueField("CategoryId")
        .Height(310)
        .Template("<span class=\"k-state-default\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" +
            "<span class=\"k-state-default\" style=\"padding-left: 15px;\"><h3>#: data.CategoryName #</h3></span>")
        .ValueTemplate("<span class=\"selected-value\" style=\"background-image: url(" + Url.Content("~/Content/web/dropdownlist/") + "#:data.CategoryId#.jpg" + ");\" ></span>" + "<span>#:data.CategoryName#</span>")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("Overview_Get_Categories", "DropDownList");
            });
        })
        .FooterTemplate("Total number of <strong>#: instance.dataSource.total() #</strong> categories found")
    )
```

The default `FillMode` value is `Solid` and it is applied to the wrapping span element through the `k-picker-solid` class.

```html
<span class="k-dropdownlist k-picker k-picker-solid">
</span>
```

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/components-rendering-overview)
* [Appearance Demo of the DropDownList](https://demos.telerik.com/aspnet-mvc/dropdownlist/appearance)