"Fancy Radio Button"
Bootstrap 3.3.0 Snippet by emresaracoglu

<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 ----------> <script src="https://use.fontawesome.com/b4564248e6.js"></script> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Fancy Radio Button</title> <!-- CSS --> <link rel="stylesheet" type="text/css" href="./resources/plugins/bootstrap-3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="./resources/plugins/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="./resources/css/default.css"> </head> <body> <div class="container"> <div class="row"> <!-- RADIO BUTTONS BLOCK --> <div class="col-xs-12 col-sm-6 col-md-5"> <h3 class="text-center">Radio Button</h3> <div class="frb-group"> <div class="frb frb-default"> <input type="radio" id="radio-button-0" name="radio-button" value="0"> <label for="radio-button-0"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-primary"> <input type="radio" id="radio-button-1" name="radio-button" value="1"> <label for="radio-button-1"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-success"> <input type="radio" id="radio-button-2" name="radio-button" value="2"> <label for="radio-button-2"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-info"> <input type="radio" id="radio-button-3" name="radio-button" value="3"> <label for="radio-button-3"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-warning"> <input type="radio" id="radio-button-4" name="radio-button" value="4"> <label for="radio-button-4"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-danger"> <input type="radio" id="radio-button-5" name="radio-button" value="5"> <label for="radio-button-5"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> </div> </div> <!-- CHECKBOX BUTTON BLOCK --> <div class="col-xs-12 col-sm-6 col-md-5 col-md-offset-2"> <h3 class="text-center">Checkbox</h3> <div class="frb-group"> <div class="frb frb-default"> <input type="checkbox" id="checkbox-0" name="checkbox" value="0"> <label for="checkbox-0"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-primary"> <input type="checkbox" id="checkbox-1" name="checkbox" value="1"> <label for="checkbox-1"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-success"> <input type="checkbox" id="checkbox-2" name="checkbox" value="2"> <label for="checkbox-2"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-info"> <input type="checkbox" id="checkbox-3" name="checkbox" value="3"> <label for="checkbox-3"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-warning"> <input type="checkbox" id="checkbox-4" name="checkbox" value="4"> <label for="checkbox-4"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> <div class="frb frb-danger"> <input type="checkbox" id="checkbox-5" name="checkbox" value="5"> <label for="checkbox-5"> <span class="frb-title">Lorem Ipsum</span> <span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span> </label> </div> </div> </div> </div> <div class="row-fluid"> <h3 class="text-center">How to use...</h3> <code> <div class="frb-group"><br> <span style="margin-left: 25px"><div class="frb frb-default"></span><br> <span style="margin-left: 50px"><input type="radio" id="radio-button-0" name="radio-button" value="0"></span><br> <span style="margin-left: 50px"><label for="radio-button-0"></span><br> <span style="margin-left: 75px"><span class="frb-title">Lorem Ipsum</span></span><br> <span style="margin-left: 75px"><span class="frb-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In semper quam nunc.</span></span><br> <span style="margin-left: 50px"></label></span><br> <span style="margin-left: 25px"></div></span><br> <span style="margin-left: 25px"><div class="frb frb-primary"></span><br> <span style="margin-left: 50px">...</span><br> <span style="margin-left: 25px"></div></span><br> </div> </code> </div> </div> <!-- JS --> <script type="text/javascript" src="./resources/plugins/jquery-3.2.1/js/jquery.min.js"></script> <script type="text/javascript" src="./resources/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> </html>
.frb-group { margin: 15px 0; } .frb ~ .frb { margin-top: 15px; } .frb input[type="radio"]:empty, .frb input[type="checkbox"]:empty { display: none; } .frb input[type="radio"] ~ label:before, .frb input[type="checkbox"] ~ label:before { font-family: FontAwesome; content: '\f096'; position: absolute; top: 50%; margin-top: -11px; left: 15px; font-size: 22px; } .frb input[type="radio"]:checked ~ label:before, .frb input[type="checkbox"]:checked ~ label:before { content: '\f046'; } .frb input[type="radio"] ~ label, .frb input[type="checkbox"] ~ label { position: relative; cursor: pointer; width: 100%; border: 1px solid #ccc; border-radius: 5px; background-color: #f2f2f2; } .frb input[type="radio"] ~ label:focus, .frb input[type="radio"] ~ label:hover, .frb input[type="checkbox"] ~ label:focus, .frb input[type="checkbox"] ~ label:hover { box-shadow: 0px 0px 3px #333; } .frb input[type="radio"]:checked ~ label, .frb input[type="checkbox"]:checked ~ label { color: #fafafa; } .frb input[type="radio"]:checked ~ label, .frb input[type="checkbox"]:checked ~ label { background-color: #f2f2f2; } .frb.frb-default input[type="radio"]:checked ~ label, .frb.frb-default input[type="checkbox"]:checked ~ label { color: #333; } .frb.frb-primary input[type="radio"]:checked ~ label, .frb.frb-primary input[type="checkbox"]:checked ~ label { background-color: #337ab7; } .frb.frb-success input[type="radio"]:checked ~ label, .frb.frb-success input[type="checkbox"]:checked ~ label { background-color: #5cb85c; } .frb.frb-info input[type="radio"]:checked ~ label, .frb.frb-info input[type="checkbox"]:checked ~ label { background-color: #5bc0de; } .frb.frb-warning input[type="radio"]:checked ~ label, .frb.frb-warning input[type="checkbox"]:checked ~ label { background-color: #f0ad4e; } .frb.frb-danger input[type="radio"]:checked ~ label, .frb.frb-danger input[type="checkbox"]:checked ~ label { background-color: #d9534f; } .frb input[type="radio"]:empty ~ label span, .frb input[type="checkbox"]:empty ~ label span { display: inline-block; } .frb input[type="radio"]:empty ~ label span.frb-title, .frb input[type="checkbox"]:empty ~ label span.frb-title { font-size: 16px; font-weight: 700; margin: 5px 5px 5px 50px; } .frb input[type="radio"]:empty ~ label span.frb-description, .frb input[type="checkbox"]:empty ~ label span.frb-description { font-weight: normal; font-style: italic; color: #999; margin: 5px 5px 5px 50px; } .frb input[type="radio"]:empty:checked ~ label span.frb-description, .frb input[type="checkbox"]:empty:checked ~ label span.frb-description { color: #fafafa; } .frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description, .frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description { color: #999; }

Related: See More


Questions / Comments: