<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="privew">
<div class="questionsBox">
<div class="questions">Este es una cuestionario y aqui va la primera pregunta</div>
<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 class="questionsRow"><a href="#" class="button" id="nextquestions">Siguiente</a> <a href="#" class="button" id="skipquestions">Saltar</a><span>1/5</span></div>
</div>
</div>
.privew {
margin-bottom: 20px;
}
.questionsBox {
display: block;
border: solid 1px #e3e3e3;
padding: 10px 20px 0px;
box-shadow: inset 0 0 30px rgba(000,000,000,0.1), inset 0 0 4px rgba(255,255,255,1);
border-radius: 3px;
margin: 0 10px;
}.questions {
background: #007fbe;
color: #FFF;
font-size: 22px;
padding: 8px 30px;
font-weight: 300;
margin: 0 -30px 10px;
position: relative;
}
.questions:after {
background: url(../img/icon.png) no-repeat left 0;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.questions:after {
left: auto;
right: 0;
background-position: -10px 0;
}
.questions:before, .questions:after {
background: black;
display: block;
position: absolute;
top: 100%;
width: 9px;
height: 7px;
content: '.';
left: 0;
text-align: left;
font-size: 0;
}
.answerList {
margin-bottom: 15px;
}
ol, ul {
list-style: none;
}
.answerList li:first-child {
border-top-width: 0;
}
.answerList li {
padding: 3px 0;
}
.answerList label {
display: block;
padding: 6px;
border-radius: 6px;
border: solid 1px #dde7e8;
font-weight: 400;
font-size: 13px;
cursor: pointer;
font-family: Arial, sans-serif;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
margin-top: 1px;
line-height: normal;
}
.questionsRow {
background: #dee3e6;
margin: 0 -20px;
padding: 10px 20px;
border-radius: 0 0 3px 3px;
}
.button, .greyButton {
background-color: #f2f2f2;
color: #888888;
display: inline-block;
border: solid 3px #cccccc;
vertical-align: middle;
text-shadow: 0 1px 0 #ffffff;
line-height: 27px;
min-width: 160px;
text-align: center;
padding: 5px 20px;
text-decoration: none;
border-radius: 0px;
text-transform: capitalize;
}
.questionsRow span {
float: right;
display: inline-block;
line-height: 30px;
border: solid 1px #aeb9c0;
padding: 0 10px;
background: #FFF;
color: #007fbe;
}
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 1px;
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: 0.5em;
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;
}
