Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML Beginner
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: Confused | :confused: Confused | :confused:
Posted 13-Jan-10 5:42am
oso_oso377
Edited 10-May-10 1:52am
Moak11.4K
v3
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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 | :cool:
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

hi,
 

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;
}
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

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>
 

  Permalink  
v2

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

  Print Answers RSS
0 OriginalGriff 325
1 DamithSL 265
2 CPallini 235
3 Maciej Los 190
4 Sergey Alexandrovich Kryukov 189
0 OriginalGriff 5,455
1 DamithSL 4,422
2 Maciej Los 3,860
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,010


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 15 Jun 2011
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100