Created: 2012-03-23 03:50
Updated: 2018-09-05 13:15

#Magic Labels ####Simple jQuery plugin to use radiobutton/checkbox labels as hooks for stylable buttons


  • Latest version of jQuery - at least version 1.5
  • The plugin


  • Download and place the plugin with your other javascripts
  • Place link to plugin at foot of webpage (before closing </body> tag), make sure you called jQuery first.
<script src="//"></script>
<script>window.jQuery || document.write('<script src=/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<script type="text/javascript" src="/js/magiclabels.js"></script>
  • Make sure your radiobuttons or checkboxes have properly assigned labels
<div class="buttons">
	<label for="apples">Apples</label>
	<label for="oranges">Oranges</label>

	<input type="radio" checked="" value="apples" id="apples" name="fruits">
	<input type="radio" value="oranges" id="oranges" name="fruits">
  • Link Magic Labels to the wrapper that holds the buttons you wish to style. There are currently no options to be passed.
  • Now, in your CSS, hide your buttons and style your labels
.buttons input { display: none }
.buttons labels { color: #333; } // unchecked
.buttons labels.checked { color: #11A0C7; } // checked

###Upcoming The above styles are the very, VERY basic. Like everything that is possible with CSS the styles that you apply to your labels are endless.

Here are a few things I plan for the future of this plugin:

  1. Event State classes to give more button-like control to your labels. These include hover, disabled and active states.
  2. A library of "themes" that you can use immediately after downloading. Just link the stylesheet and roll with it.
Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more