In this post we will see how we can Style our ASP.NET Dropdownlist using CSS. Now styling up your ASP.NET dropdownlist control is pretty easy task but vital for your website design and usage. So let’s see how we can design two awesome looking ASP.NET dropdownlist styles using just few lines of CSS. ASP.NET Dropdownlist CSS Style Image :
ASP.NET Dropdownlist CSS Styles – Style 1 and Style 2 Combined
Design 1:
CSS Style:
.mydropdownlist
{
color: #fff;
font-size: 20px;
padding: 5px 10px;
border-radius: 5px;
background-color: #cc2a41;
font-weight: bold;
}
ASPX :
<asp:DropDownList runat="server" ID="ddlItems" CssClass="mydropdownlist"> <asp:ListItem Text="One" Value="One" /> <asp:ListItem Text="Two" Value="Two" /> <asp:ListItem Text="Three" Value="Three" /> <asp:ListItem Text="Four" Value="Four" /> <asp:ListItem Text="Five" Value="Five" /> <asp:ListItem Text="Six" Value="Six" /> <asp:ListItem Text="Seven" Value="Seven" /> <asp:ListItem Text="Eight" Value="Eight" /> <asp:ListItem Text="Nine" Value="Nine" /> <asp:ListItem Text="Ten" Value="Ten" /> </asp:DropDownList>
ASP.NET Dropdownlist CSS Styles – Style 1 and Style 2 Combined
Design 2:
CSS Style:
.mydropdownlist1
{
color: #fff;
font-size: 20px;
padding: 5px 10px;
border-radius: 5px 12px;
background-color: #292929;
font-weight: bold;
}
ASPX :
<asp:DropDownList runat="server" ID="DropDownList1" CssClass="mydropdownlist1"> <asp:ListItem Text="Sunday" Value="Sunday" /> <asp:ListItem Text="Monday" Value="Monday" /> <asp:ListItem Text="Tuesday" Value="Tuesday" /> <asp:ListItem Text="Wednesday" Value="Wednesday" /> <asp:ListItem Text="Thursday" Value="Thursday" /> <asp:ListItem Text="Friday" Value="Friday" /> <asp:ListItem Text="Saturday" Value="Saturday" /> </asp:DropDownList>
Complete Page :
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DropDownList CSS</title>
<style>
body
{
font-family: Arial;
font-size: 20px;
}
.mydropdownlist
{
color: #fff;
font-size: 20px;
padding: 5px 10px;
border-radius: 5px;
background-color: #cc2a41;
font-weight: bold;
}
.mydropdownlist1
{
color: #fff;
font-size: 20px;
padding: 5px 10px;
border-radius: 5px 12px;
background-color: #292929;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>ASP.NET DROPDOWNLIST CSS EXAMPLE</h1>
<hr />
Select any number :
<asp:DropDownList runat="server" ID="ddlItems" CssClass="mydropdownlist">
<asp:ListItem Text="One" Value="One" />
<asp:ListItem Text="Two" Value="Two" />
<asp:ListItem Text="Three" Value="Three" />
<asp:ListItem Text="Four" Value="Four" />
<asp:ListItem Text="Five" Value="Five" />
<asp:ListItem Text="Six" Value="Six" />
<asp:ListItem Text="Seven" Value="Seven" />
<asp:ListItem Text="Eight" Value="Eight" />
<asp:ListItem Text="Nine" Value="Nine" />
<asp:ListItem Text="Ten" Value="Ten" />
</asp:DropDownList>
<br />
<br />
Select any day :
<asp:DropDownList runat="server" ID="DropDownList1" CssClass="mydropdownlist1">
<asp:ListItem Text="Sunday" Value="Sunday" />
<asp:ListItem Text="Monday" Value="Monday" />
<asp:ListItem Text="Tuesday" Value="Tuesday" />
<asp:ListItem Text="Wednesday" Value="Wednesday" />
<asp:ListItem Text="Thursday" Value="Thursday" />
<asp:ListItem Text="Friday" Value="Friday" />
<asp:ListItem Text="Saturday" Value="Saturday" />
</asp:DropDownList>
<br />
</div>
</form>
</body>
</html>
See Also :
- ASP.NET – Create Awesome looking Buttons with CSS
- ASP.NET – How to use Custom fonts to style ASP.NET Web application using CSS
- ASP.NET – How to create a great looking Image Slider for your ASP.NET Web application
- ASP.NET – How to Style up your ASP.NET Web application’s Button control using Bootstrap CSS
- ASP.NET – Using Bootstrap Glyphicons in ASP.NET Website.
- ASP.NET Export GridView to Excel
- ASP.NET – Using HTML controls in ASP.NET Web pages.
- How to Fill ASP.NET Dropdownlist using MS SQL Database. Bind ASP.NET Dropdownlist control using Database.