Click here to Skip to main content
15,936,850 members
Please Sign up or sign in to vote.
4.00/5 (2 votes)
See more:
I want to give some style to my radio button and combo box.
So what should I do to make them look attractive ..............:confused::confused::confused::confused:
Updated 10-May-10 0:52am


try this one

body {
    font: 0.8em/21px arial,sans-serif;
.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(checkbox.gif) no-repeat;
    display: block;
    clear: left;
    float: left;
.radio {
    background: url(radio.gif) no-repeat;
.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) no-repeat;
    overflow: hidden;
Share this answer
I have implemented the styles to asp controls so we have to choose the property CssClass="TestStyle but in case of html controls it works like Class="TestStyle"
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default3.aspx.vb" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

     	padding: 0.25em;
          background: #adc175; 
          float: left; 
          margin: 1.5em; 
          font: bold 105% times new roman, serif; 
          border: #82a91b 2px solid; 
          width: 10em;
<form id="Form1"  runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="TestStyle" 
        ID="CheckBox2" runat="server" CssClass="TestStyle" Text="click" />
<select id="Select1" class="TestStyle">
Share this answer

You can create css class for your control and assign that class to your control.

you can set backgroudn-color, color, font-family, font-size, etc properties to give better look according to your layout.



hope this will solve your problem. also you can set background image in your control.
Share this answer
What is the problem with styling with these...

You can do that easily using proper CSS to them.

Check this out :[^]

I hope you will like this. :cool:
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900