"Custom Radio Inputs with Content"
Bootstrap 3.3.0 Snippet by tokage

<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="jumbotron"><h3>Custom Radio Inputs With Selected Content</h3></div> <div class="row"> <div class="col-md-4"> <div class="content bottom-border" id="radio1Div"> <strong>Option 1</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio1" checked /> <label for="radio1"></label> </div> </div> </div> <div class="col-md-4"> <div class="content" id="radio2Div"> <strong>Option 2</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio2" /> <label for="radio2"></label> </div> </div> </div> <div class="col-md-4"> <div class="content" id="radio3Div"> <strong>Option 3</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio3"/> <label for="radio3"></label> </div> </div> </div> <div class="col-md-4"> <div class="content" id="radio4Div"> <strong>Option 4</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio4"/> <label for="radio4"></label> </div> </div> </div> <div class="col-md-4"> <div class="content" id="radio5Div"> <strong>Option 5</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio5" /> <label for="radio5"></label> </div> </div> </div> <div class="col-md-4"> <div class="content" id="radio6Div"> <strong>Option 6</strong> <hr /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vulputate ex a dui aliquet, in blandit mauris mollis. Pellentesque tincidunt, felis euismod aliquet lacinia, nunc est rhoncus ex, eu viverra ipsum risus vel nulla</p> <hr /> <button class="btn btn-default">Details</button><button class="btn btn-info pull-right">Details</button> <div class="radio-container"> <input class="radio" type="radio" name="radio" id="radio6"/> <label for="radio6"></label> </div> </div> </div> </div> </div>
body{ background:transparent url('https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=background-blur-clean-531880.jpg&fm=jpg'); } .content{ position:relative; border:1px solid #c0c0c0; width:100%; padding:20px 20px 20px 60px; height:300px; margin-bottom:30px; background-color:#fff; } .content .radio-container { position: absolute; left: 15px; top: 22px } .radio-container input[type="radio"] { position: fixed; top: -9999px; left: -9999px; } .radio-container label:before { content: ''; -webkit-appearance: none; background-color: transparent; border: 2px solid #c0c0c0; padding: 15px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 15px; border-radius: 10px; } .radio-container input:checked + label:after { content: ''; display: block; position: absolute; top: 6px; left: 12px; width: 10px; height: 20px; border: solid #c0c0c0; border-width: 0 4px 4px 0; transform: rotate(45deg); } .bottom-border { border-color: #52c5f8; border-bottom: 10px solid #52c5f8; background-color: #dff3ff; color: #52c5f8; -webkit-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; -webkit-transition: color 1000ms linear; -ms-transition:color 1000ms linear; transition: color 1000ms linear; }
$("input.radio:radio").change(function () { var kid = $(this).attr('id') if ('input[name=radio]:checked') { $('.content').removeClass('bottom-border'); $('#' + kid + 'Div').addClass('bottom-border'); } });

Related: See More


Questions / Comments: