Radion buttons design are so boring, right? So, if you want to override browser defaults, with a little extra markup, the form elements can be styled in almost any way - no JavaScript required. To create a custom design for your input type radio buttons, using CSS only, first step is to place the inputs in your HTML file, like this:

<div> <input id="option-one" name="radio" value="one" checked="checked" type="radio"> <label for="option-one"> <span></span> First Option </label> </div> <div> <input id="option-two" name="radio" value="two" type="radio"> <label for="option-two"> <span></span> Second Option </label> </div>

Then, we are going to do some styling in the CSS file:

input[type="radio"] { display: none; } input[type="radio"] + label { font-weight: 400; font-size: 14px; } input[type="radio"] + label span { display: inline-block; width: 18px; height: 18px; margin: -2px 10px 0 0; vertical-align: middle; cursor: pointer; -moz-border-radius: 50%; border-radius: 50%; border: 3px solid #ffffff; } input[type="radio"] + label span { background-color: #fff; } input[type="radio"]:checked + label { color: #333; font-weight: 700; } input[type="radio"]:checked + label span { background-color: #ff8800; border: 2px solid #ffffff; box-shadow: 2px 2px 2px rgba(0,0,0,.1); } input[type="radio"] + label span, input[type="radio"]:checked + label span { -webkit-transition: background-color 0.24s linear; -o-transition: background-color 0.24s linear; -moz-transition: background-color 0.24s linear; transition: background-color 0.24s linear; }

That's it! Of course, you can change the colors or find another shape or size for the buttons.