Custom Radio Buttons

radio_buttons_featured

How many times have you looked at your nicely styled web form and then got hit in the face by the bad look of those out of style radio buttons? Radio buttons lack CSS styling support, so they will always look out of style.

The title of this tutorial might be deceiving because we will not use radio buttons at all, instead we will represent radio buttons as an HTML <li> element. The beauty of this method is that you can actually use any HTML element you like, be it a paragraph, image or list. View Demo

We will display our radio button replacement as I like to call it and submit the selected value to PHP and then display the submitted value to confirm that it actually works. I forgot to mention that along with our HTML and PHP we will also use jQuery for the magic.

So the idea is that we set the id of the <li> in our unordered list to the value we need to submit then the jQuery transfers this value to the form’s hidden input field which submits it to our PHP code via $_POST[] global array and then displays the value. I included the PHP code because I wanted to show you how can you use this in practice. I mean once you have the value submitted to PHP you can store it it in a database table,  a session etc.

So first here is our CSS to accomplish the look we like

#rbtn ul{list-style-type:none;}
#rbtn ul li{cursor:pointer; display:inline-block; width:100px; border:1px solid #bbb; padding:5px; margin-right:5px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; text-align:center;}
.over{background: #eee;}
.selected{background: #61a4e6; color:#fff;}

HTML <li> and <form>

    <div id="rbtn">
      <ul>
        <li id="1" class="selected">Choice 1</li>
        <li id="2">Choice 2</li>
        <li id="3">Choice 3</li>
        <li id="4">Choice 4</li>
        <li id="5">Choice 5</li>
      </ul>
    </div>
      <form action="custom-radio.php" name="form1" id="form1" method="post" onSubmit="setChoice();">
        <input name="mychoice" id="mychoice" type="hidden" value="" />
        <input name="submit1" type="submit" value="Submit" />
      </form>

The jQuery to set the value of the hidden input field and do some visual effects such as mouseover and mouseout

$(document).ready(function() {
	$(function(){
		$('#rbtn ul li').click(function(){
			// get the value from the id of the clicked li and attach it to the window object to be able to use it later.
			window.choice = this.id;
			$('#rbtn ul li').removeClass('selected');
			$(this).addClass('selected');
			}); 

			$('#rbtn ul li').mouseover(function(){
			$(this).addClass('over');
			});

			$('#rbtn ul li').mouseout(function(){
			$(this).removeClass('over');
		});

	}); //end function
}); //document ready

	function setChoice(){
		if(!$('#rbtn ul li.selected').click()){
			$('#mychoice').val(1);
			}else{
				// set the value of the hidden input field
				$('#mychoice').val(window.choice);
			}
	}

Finally the PHP code that displays the selected value

DemoDownload

If you have any questions or would like me to discuss a certain topic please send me a message or simply just leave a comment below!

Custom Radio Buttons
6 votes, 4.00 avg. rating (80% score)
  • Posted in: JavaScript & jQuery
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.

  • Motasem Alwazir

    So we can do whatever we want with the radio button’s style and have the same work and efficiency.
    Very good job my friend. The most thing I like about it ,that it’s really simple.
    Waiting more from you.

    • Husamaldin

      I am glad you found this helpful. Thanks for your support