This article will show you how you can create a stylish and
change the style sheet of radiobutton,
textbox, dropdownlist and listbox controls in asp.net using css style sheet.
Some of my previous articles are as follows: Dynamic
Css Menu Creation Up to Three Level in Asp.Net Using C#.Net, jQuery
DatePicker Calendar With Dropdown Month and Year in Asp.Net, Dynamic
Css Menu Creation in Asp.Net Using C#.Net, Login
Form With LightbBox Effect in Asp.Net, Highlight
GridView Row on Mouseover Using CSS in Asp.Net C#.Net.
So for this article first we will create a new asp.net
application and add the radiobutton, textbox, dropdownlist and listbox control
in your page after adding controls your page will look as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Stylish
RadioButton, DropdownList, ListBox and TextBox Control In Asp.Net Using Css</title>
<link href="Styles/Site.css" rel="stylesheet"
type="text/css"
/>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" class="content">
<tr>
<td>
Radio Button<br />
<input type="radio" name="1" value="male" class="rediobutton" runat="server">Item
1
<input type="radio" name="1" value="male" class="rediobutton" runat="server">Item
2
</td>
</tr>
<tr>
<td>
Dropdown List<br />
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectbox">
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 2</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
ListBox
<br />
<asp:ListBox ID="ListBox1" runat="server" CssClass="selectbox">
<asp:ListItem>Item 2</asp:ListItem>
<asp:ListItem>Item 1</asp:ListItem>
<asp:ListItem>Item 3</asp:ListItem>
</asp:ListBox>
</td>
</tr>
<tr>
<td>
TextBox<br />
<asp:TextBox ID="TextBox1" runat="server" CssClass="textbox"></asp:TextBox>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Now we will add a style sheet in our page. Add the below css
style in style sheet page.
.selectbox
{
width: 98%;
height: 27px;
background-color:
#FFF;
font: 400 12px/18px 'Open Sans' , sans-serif;
color: #000;
font-weight:
normal;
border: 1px solid #ccc;
margin: 5px 0 0 0;
padding: 5px;
}
.textbox
{
width: 30%;
height: 15px;
background-color:
#FFF;
font: 400 12px/18px 'Open Sans' , sans-serif;
color: #000;
font-weight:
normal;
border: 1px solid #ccc;
margin: 5px 0 0 0;
padding: 5px;
}
.rediobutton
{
width: 30px;
height: 18px;
background-color:
#FFF;
font: 400 12px/18px 'Open Sans' , sans-serif;
color: #000;
font-weight:
normal;
border: 1px solid #ccc;
margin: 5px 0 0 0;
padding: 5px;
}
.content
{
border: 1px solid #BDBDBD;
width: 91%;
padding: 5px;
margin: 0px 0 0 5px;
}
|
Now we have done run the application to check the output.
About the Author
doesn't work :(
ReplyDeleteHow you used it...which browser you have used
Delete