asp.net dropdownlist css style 001

ASP.NET Styling Dropdownlist using CSS

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 :



Leave a Reply

Your email address will not be published. Required fields are marked *

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