Thursday, March 11, 2010

Custom style for your Radio Button,Checkboxes and Select Lists

I was searching for some easy JavaScript code via which I can change the style of html select. Its because we often have requirement to show different style of html select. When I say custom it mean how to entirely change the look and feel of a drop down.

Searching in Google I found couple of solutions to my problem. Most of the design is done via JQuery plugin. among those I find one easy one the link is given bellow.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

image

The usage is pretty simple just add the script in your project and add link to your master page or page.

Then add css for your items. example css is given bellow.

.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;
}
Lastly add css class ‘styled’ tag to the element that you want to make custom. you can customize the script and css to get your designed theme.


"<input type="checkbox" class="styled" /> “



Both script and css is given in the above url. just download and use.



image



Note: I found a problem while using this. when I use this the auto post back feature of asp.net elements are not working. When I have the solutions will share again.



Update: You can find whole lot of html form element customization examples here. Just choose what ever best suites you. “http://www.netwaver.com/23/24-html-form-elements-customization-techniques/



Best of luck and Happy programming