<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="reg"> <bdo> <input type="radio" value="Taurus" onfocus="javascript:checkNullProf()" name="memberSunSign"> <span></span> <abbr> Taurus </abbr> </bdo> </div> <div class="reg"> <bdo> <input type="radio" value="Taurus" onfocus="javascript:checkNullProf()" name="memberSunSign"> <span></span> <abbr> Taurus </abbr> </bdo> </div> </div> </div>

.reg bdo { float: left; margin-bottom: 10px; position: relative; width: 50%; } .reg bdo input[type="radio"] { cursor: pointer; opacity: 0; position: relative; z-index: 999996; } .reg bdo span { border: 1px solid red; border-radius: 100%; /* background: rgba(0, 0, 0, 0) url("../images/radio_btn.png") no-repeat scroll center bottom;*/ cursor: pointer; left: -2px; padding: 8px; position: absolute; top: 5px; z-index: 0; } .reg bdo span:hover { border: 1px solid black; /* background: rgba(0, 0, 0, 0) url("../images/radio_btn_ho.png") no-repeat scroll center bottom;*/ } .reg bdo input[type="radio"]:checked + span { /* background: rgba(0, 0, 0, 0) url("../images/radio_btn_ho.png") no-repeat scroll center bottom;*/ } .reg bdo input[type="radio"]:checked + span::after { background: #000 none repeat scroll 0 0; border-radius: 100%; bottom: 0; content: " "; height: 8px; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 8px; }