How to create custom radio buttons in HTML using CSS and jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the CSS :checked Pseudo-class with jQuery

If try to style radio buttons directly using CSS properties like background or border it will not work, because most of the form elements are native part of the browsers and does not accept so much visual styling. So we have to find another way of styling radio buttons.

In this tutorial we will create custom radio buttons with the help of CSS and little bit of jQuery. There are many other solutions available like jQuery plug-ins to customize radio buttons but they are unnecessarily complex and not so easy to implement. Here we will simulate the effect of custom radio buttons with the minimum effort that works like a charm in your project and highly compatible across the browsers, even works perfectly in IE7.

The HTML Code

Create radio button like you do in regular HTML and place it any where, but do not forget to put the name attribute, because this solution depends on the name attributes of radio buttons, which is also required if you want to put your radio buttons in real action.

  • <form action="action.php" method="post">
  •     <h3>What Is Your Favorite Web Browser</h3>
  •     <label><input type="radio" name="browser" checked="checked" value="firefox"> Firefox</label>
  •     <label><input type="radio" name="browser" value="chrome"> Chrome</label>
  •     <label><input type="radio" name="browser" value="safari"> Safari</label>
  • </form>

Custom Radio Button Example Images

For the sake of simplicity, we have used separate images to specify the different states of a radio button like normal, hover, selected etc. but it is recommended to combine all these images in an image sprite form before using this solution in a real project for better performance and minimizing the HTTP request. However if you download the source code of this custom radio buttons example it will contain both the simple and sprite version.

Custom Radio Buttons Demo

The CSS Code

What we are trying to do with the CSS is hide the default radio buttons with the help of CSS opacity property and show our custom radio buttons in place of them. As we all know CSS opacity property doesn't work in Internet Explorer 8 and lower version, but don't worry we have placed some CSS hacks to deal with the older browsers including IE7 and IE8.

  • <style type="text/css">
  •     .custom-radio{
  •         width: 16px;
  •         height: 16px;
  •         display: inline-block;
  •         position: relative;
  •         z-index: 1;
  •         top: 3px;
  •         background: url("radio.png") no-repeat;
  •     }
  •     .custom-radio:hover{            
  •         background: url("radio-hover.png") no-repeat;
  •     }
  •     .custom-radio.selected{
  •         background: url("radio-selected.png") no-repeat;
  •     }
  •     .custom-radio input[type="radio"]{
  •         margin: 1px;
  •         position: absolute;
  •         z-index: 2;            
  •         cursor: pointer;
  •         outline: none;
  •         opacity: 0;
  •         /* CSS hacks for older browsers */
  •         _noFocusLine: expression(this.hideFocus=true); 
  •         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  •         filter: alpha(opacity=0);
  •         -khtml-opacity: 0;
  •         -moz-opacity: 0;
  •     }
  • </style>

You might be wondering we haven't put these classes anywhere in the HTML, actually we will add these classes to DOM at run time using jQuery.


The jQuery Code

Our customRadio() function simply wrap the default radio buttons in a <span> element and apply the class .custom-radio on it. Once the .custom-radio class is applied on the <span> elements CSS will do the magic and our custom radio button image will be displayed in place of the default radio buttons. Don't forget to include the jQuery in your document before this script. We've called the customRadio() function when DOM is fully loaded.

  • <script type="text/javascript">
  •     function customRadio(radioName){
  •         var radioButton = $('input[name="'+ radioName +'"]');
  •         $(radioButton).each(function(){
  •             $(this).wrap( "<span class='custom-radio'></span>" );
  •             if($(this).is(':checked')){
  •                 $(this).parent().addClass("selected");
  •             }
  •         });
  •         $(radioButton).click(function(){
  •             if($(this).is(':checked')){
  •                 $(this).parent().addClass("selected");
  •             }
  •             $(radioButton).not(this).each(function(){
  •                 $(this).parent().removeClass("selected");
  •             });
  •         });
  •     }
  •     // Calling customRadio function
  •     $(document).ready(function (){
  •         customRadio("browser");
  •     })
  • </script>
 

Tip:If JavaScript is disabled in the browser, normal radio buttons will appear instead of customized radio buttons. So it will not break your code in any way.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.