ASP.NET Styling Dropdownlist using CSS

  • by
asp.net dropdownlist css style 001

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 style 001

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 style 001

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 :


  1. Base64Encode.io - Realtime Encode your string to Base64 format.
  2. Base64Decode.io - Realtime Decode Base64 data to plain text.
  3. Md5Hash.io - Realtime Encoding in Md5Hash.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.