jQuery checkbox, radio button and selectbox css styling solutions

jQuery checkbox, radio button and selectbox css styling 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.

fancy-form

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.

Input-Replacement

jQuery checkbox v.1.3.0 Beta 1

Lightweight custom styled checkbox implementaion for jQuery 1.2.x and 1.3.x.

jQuery-checkbox

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-Checkboxes

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.

jQuery-selectbox

About reADactor

Try to be a mixer of inspiration, source of tutorials, tips and a reactor of your future design ideas, a place from where you can download freebies, vectors and web templates. Follow us on Twitter and Facebook

View all posts

Network News

Feedbox

Share this!

Subscribe to our RSS feed. Tweet this! StumbleUpon Reddit Digg This! Bookmark on Delicious Share on Facebook
  1. 135+ Great Articles for Web Designers and Developers — tripwire magazine

  2. toastyghost
    August 31, 2010 at 9:09 pm

    fancyform uses mootools, not jquery

    • reADactor
      August 31, 2010 at 10:19 pm

      true, but still a JavaScript framework.

  3. November 17, 2010 at 10:58 pm

    but the topic says jquey ………….
    nice list, though nothing new..

  4. January 17, 2011 at 3:03 am

    I really like these tools! I think I can implement them really well!

  5. September 14, 2011 at 9:14 pm

    The link to the last example doesn’t work anymore.

Leave a reply

*

*

Your email address will not be published. Required fields are marked *