<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="mcq">
<div class="panel panel-primary">
<div class="panel-body two-col">
<h3 class="panel-title ">
<span class="glyphicon glyphicon-hand-right"></span> <span class="pull-right badge badge-info">1</span>
<pre class="">Which among the following statements regarding the Surrogacy (Regulation) bill, 2016 is incorrect ?
a. It allows only Indian citizens for Surrogacy in India
b. The bill allows both gestational and traditional Surrogacy
c. Any woman in the age range of 25 to 35 years of age is allowed to undertake surrogacy
d. Surrogacy boards will decide code of conduct for Surrogacy in India </pre>
</h3>
<div class="">
<div class="funkyradio">
<div class="funkyradio-success">
<input type="checkbox" name="checkbox" id="checkbox1" />
<label for="checkbox1">Third Option success</label>
</div>
<div class="funkyradio-success">
<input type="checkbox" name="checkbox" id="checkbox2" />
<label for="checkbox2">Third Option success</label>
</div>
<div class="funkyradio-success">
<input type="checkbox" name="checkbox" id="checkbox3" />
<label for="checkbox3">Third Option success</label>
</div>
<div class="funkyradio-success">
<input type="checkbox" name="checkbox" id="checkbox4" />
<label for="checkbox4">Third Option success</label>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-primary btn-sm">
<span class="glyphicon glyphicon-arrow-left"></span> Vote</button>
<button type="button" class="pull-right btn btn-primary btn-sm">
Next <span class="glyphicon glyphicon-arrow-right"></span></button>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
body { margin-top:20px; }
.mcq .panel-body .radio,.panel-body .checkbox {margin-top: 0px;margin-bottom: 0px;}
.mcq .panel-body .radio label,.panel-body .checkbox label { display:block; }
.mcq .panel {
background-color: #f6f0bb;
border-color:rgba(0,0,0,0.2);
}
.mcq .panel .panel-body {
color: black;
}
.mcq .panel .panel-footer {
border:0;
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
color: #fff;
}
.mcq .panel pre {
margin-top:5px;
background-color: rgba(0, 0, 0, 0);
color: black;
}
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 30px;
border: 1px solid #D1D3D4;
font-weight: normal;
color: #5a520c;
}
.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: 2px;
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: #71670f;
border-radius: 30px 0 0 30px;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
font-weight: bold;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}
.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-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #11D700;
}
