"Wordpress Radio"
Bootstrap 3.3.0 Snippet by mattiasghodsian

<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"> <div class="col-md-6"> <div class="radio"> <label> <input type="radio" name="optionsRadios" value="option1" checked> Option one is this and that—be sure to include why it's great </label> </div> </div> <div class="col-md-6"> <div class="radio"> <label> <input type="radio" name="optionsRadios" value="option1"> Option one is this and that—be sure to include why it's great </label> </div> </div> </div> </div>
input[type=radio] { -webkit-border-radius: 50%; border-radius: 50%; margin-right: 4px; line-height: 10px; } input[type=radio] { background: #fff; color: #555; clear: none; cursor: pointer; display: inline-block; line-height: 0; height: 16px; margin: -4px 4px 0 0; outline: 0; padding: 0!important; text-align: center; vertical-align: middle; width: 16px; min-width: 16px; -webkit-appearance: none; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); box-shadow: inset 0 1px 2px rgba(0,0,0,.1); -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } input[type=radio]{ border: 1px solid #ddd; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.07); background-color: #fff; color: #32373c; outline: 0; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; } input[type=radio]:checked:before { content: '\2022'; text-indent: -9999px; -webkit-border-radius: 50px; border-radius: 50px; font-size: 24px; width: 6px; height: 6px; margin: 4px; line-height: 16px; background-color: #1e8cbe; } input[type=radio]:checked:before { float: left; display: inline-block; vertical-align: middle; width: 6px; font: 400 21px/1 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Related: See More


Questions / Comments: