<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<title></title>
<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>
</head>
<body>
<div class="col-md-4">
<div class="col-md-6">
<h4>Radio Buttons</h4>
<div class="funkyradio">
<div class="funkyradio-default">
<input type="radio" name="radio" id="radio1" />
<label for="radio1">First Option default</label>
</div>
<div class="funkyradio-primary">
<input type="radio" name="radio" id="radio2" checked/>
<label for="radio2">Second Option primary</label>
</div>
<div class="funkyradio-success">
<input type="radio" name="radio" id="radio3" />
<label for="radio3">Third Option success</label>
</div>
<div class="funkyradio-danger">
<input type="radio" name="radio" id="radio4" />
<label for="radio4">Fourth Option danger</label>
</div>
<div class="funkyradio-warning">
<input type="radio" name="radio" id="radio5" />
<label for="radio5">Fifth Option warning</label>
</div>
<div class="funkyradio-info">
<input type="radio" name="radio" id="radio6" />
<label for="radio6">Sixth Option info</label>
</div>
</div>
</div>
</div>
</body>
</html>
@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css')
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
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;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]: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;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
/* SCSS STYLES */
/*
.funkyradio {
div {
clear: both;
overflow: hidden;
}
label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
input[type="radio"],
input[type="checkbox"] {
&:empty {
display: none;
~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
margin-top: 2em;
cursor: pointer;
user-select: none;
&:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
}
}
&:hover:not(:checked) ~ label {
color: #888;
&:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
}
&:checked ~ label {
color: #777;
&:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
}
&:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
}
&-default {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #333;
background-color: #ccc;
}
}
}
&-primary {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
}
}
&-success {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
}
}
&-danger {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
}
}
&-warning {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
}
}
&-info {
input[type="radio"],
input[type="checkbox"] {
&:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
}
}
}
*/
