How to create custom radio buttons in HTML using CSS and jQuery
Answer: Use the CSS
:checked Pseudo-class with jQuery
If try to style radio buttons directly using CSS properties like
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
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>
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.
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.
background: url("radio.png") no-repeat;
background: url("radio-hover.png") no-repeat;
background: url("radio-selected.png") no-repeat;
/* CSS hacks for older browsers */
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
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.
var radioButton = $('input[name="'+ radioName +'"]');
$(this).wrap( "<span class='custom-radio'></span>" );
// Calling customRadio function
Here are some more FAQ related to this topic: