<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="funkyradio"> <div> <input type="radio" name="radio" id="radio1" checked/> <label for="radio1">First Option</label> </div> <div> <input type="radio" name="radio" id="radio2" /> <label for="radio2">Second Option</label> </div> <div> <input type="radio" name="radio" id="radio3" /> <label for="radio3">Third Option</label> </div> <div> <input type="radio" name="radio" id="radio4" /> <label for="radio4">Fourth Option</label> </div> </div>

div { clear: both; margin: 0 50px; } label { width: 200px; border-radius: 3px; border: 1px solid #D1D3D4 } input[type="radio"]:empty { margin-left: -999px; } input[type="radio"]:empty ~ label { position: relative; float: left; line-height: 2.5em; text-indent: 3.25em; margin-top: 2em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input[type="radio"]:empty ~ label:before { position: absolute; display: block; top: 0; bottom: 0; left: 0; content:''; width: 2.5em; background: #D1D3D4; border-radius: 3px 0 0 3px; } input[type="radio"]:hover:not(:checked) ~ label:before { content:'\2714'; text-indent: .9em; color: #C2C2C2; } input[type="radio"]:hover:not(:checked) ~ label { color: #888; } input[type="radio"]:checked ~ label:before { content:'\2714'; text-indent: .9em; color: #9CE2AE; background-color: #4DCB6D; } input[type="radio"]:checked ~ label { color: #777; } input[type="radio"]:focus ~ label:before { box-shadow: 0 0 0 3px #999; }