jQuery checkbox, radio button and selectbox css styling solutions Tweet
Any web designer have a challenge when is talk about customization of form elements. Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? Read this article to find some nice cross browser JavaScript solutions.
FancyForm
Is a powerful checkbox replacement script used to provide the ultimate flexibility in changing the appearance and function of HTML form elements. It’s accessible, easy to use and degrades gracefully on all older, non-supporting browsers.
CRIR: Checkbox & Radio Input Replacement
This combination of JavaScript and CSS will hide checkbox and radio inputs that have a class = “crirHiddenJS”, an id, and a proper label tag. This will allow you to style the label however you wish using CSS, and the actual input control will be hidden. The form will still collect data as it normally would because the label itself will trigger the hidden input control. If javascript is disabled no inputs will be hidden and the form is still be fully functional.
jQuery checkbox v.1.3.0 Beta 1
Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.
Custom Form Elements
This script will let you do that. Easily. The unobtrusive script gracefully degrades, so if JavaScript is disabled, normal form input objects appear instead of your customized elements. This works flawlessly in Firefox, Safari, Internet Explorer 7, Opera and others. In Internet Explorer, the select lists are unstyled, but the checkboxes and radio buttons still look and function beautifully.
jQuery selectbox replacement
The jQuery select box replacement let you replace the html select tag with a stylish one in an unobtrusive way, technically it hides the real select box and create an html list, when you choose an option it reflects this change in the real select tag.
Download the testking CISM guide to learn about css solutions. Our testking CISSP tutorials and testking mcdba dupms cover all the fundamental aspects of web designing.
Post tags: button, checkbox, code, css, Freebies, javascript, jquery, plugin, selectbox, web design






















August 31, 2010
fancyform uses mootools, not jquery
August 31, 2010
true, but still a JavaScript framework.
November 17, 2010
but the topic says jquey ………….
nice list, though nothing new..
January 17, 2011
I really like these tools! I think I can implement them really well!
September 14, 2011
The link to the last example doesn’t work anymore.