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:
Posted
Updated 10-May-10 0:52am
v3

hi,


try this one


C#
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<style>
.TestStyle
     	{ 
     	padding: 0.25em;
          background: #adc175; 
          float: left; 
          margin: 1.5em; 
          font: bold 105% times new roman, serif; 
          border: #82a91b 2px solid; 
          width: 10em;
     	}
</style>
</head>
<body>
<form id="Form1"  runat="server">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="TestStyle" 
        Height="16px">
        <asp:ListItem>a
        <asp:ListItem>b
        <asp:ListItem>c
        <asp:ListItem>d
        <asp:ListItem>e
        <asp:ListItem>f
    
<asp:CheckBox 
        ID="CheckBox2" runat="server" CssClass="TestStyle" Text="click" />
<select id="Select1" class="TestStyle">
    <option>a</option>
      <option>b</option>
        <option>c</option>
</select>
</form>
</body>
</html>
 
Share this answer
 
v2
Hi,

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.

eg.

select
{
background-color:#000000;
color:#ffffff;
font-family:ariel;
font-size:10;
}

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 :
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/[^]

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