Hi All, I have created these some custom styles for radio buttons of quiz questions. I have used these with adaptable theme. It took me 2 days to come up with this CSS so, I hope it's worth sharing to save others time and money.
/* Changing the alignment of radio button*/
.r0 * {
box-sizing: border-box;
}
.r0 *:before,
.r0 *:after {
box-sizing: border-box;
}
/*Label style*/
.ml-1{
display: inline-block;
margin-top: -1px;
margin-left: -8px !important;
overflow-wrap: break-word;
}
/*span style*/
.answernumber:before{
content:" ";
display:inline-block;
width:50px;
}
/*option style*/
.answernumber{
display: inline;
margin-left: -50px;
}
.r0 input[type="checkbox"],
.r0 input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.r0 input[type="checkbox"]:focus + label:before,
.r0 input[type="radio"]:focus + label:before,
.r0 input[type="checkbox"]:hover + label:before,
.r0 input[type="radio"]:hover + label:before {
border-color: #4F8196;
background-color: #f2f2f2;
}
.r0 input[type="checkbox"]:active + label:before,
.r0 input[type="radio"]:active + label:before {
transition-duration: 0s;
}
.r0 input[type="checkbox"] + label,
.r0 input[type="radio"] + label {
position: relative;
padding: 5px 5px 5px 2em;
vertical-align: middle;
user-select: none;
cursor: pointer;
}
.r0 input[type="checkbox"] + label:before,
.r0 input[type="radio"] + label:before {
box-sizing: content-box;
content: '';
color: #4F8196;
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -9px;
border: 2px solid #4F8196;
text-align: center;
transition: all 0.4s ease;
}
.r0 input[type="checkbox"] + label:after,
.r0 input[type="radio"] + label:after {
box-sizing: content-box;
content: '';
background-color: #4F8196;
position: absolute;
top: 50%;
left: 4px;
width: 10px;
height: 10px;
margin-top: -5px;
transform: scale(0);
transform-origin: 50%;
transition: transform 200ms ease-out;
}
.r0 input[type="checkbox"]:disabled + label:before,
.r0 input[type="radio"]:disabled + label:before {
border-color: #cccccc;
}
.r0 input[type="checkbox"]:disabled:focus + label:before,
.r0 input[type="radio"]:disabled:focus + label:before,
.r0 input[type="checkbox"]:disabled:hover + label:before,
.r0 input[type="radio"]:disabled:hover + label:before {
background-color: inherit;
}
.r0 input[type="checkbox"]:disabled:checked + label:before,
.r0 input[type="radio"]:disabled:checked + label:before {
background-color: #cccccc;
}
.r0 input[type="checkbox"] + label:after {
background-color: transparent;
top: 50%;
left: 4px;
width: 8px;
height: 3px;
margin-top: -4px;
border-style: solid;
border-color: #ffffff;
border-width: 0 0 3px 3px;
border-image: none;
transform: rotate(-45deg) scale(0);
}
.r0 input[type="checkbox"]:checked + label:after {
content: '';
transform: rotate(-45deg) scale(1);
transition: transform 200ms ease-out;
}
.r0 input[type="radio"]:checked + label:before {
animation: borderscale 300ms ease-in;
background-color: white;
}
.r0 input[type="radio"]:checked + label:after {
transform: scale(1);
}
.r0 input[type="radio"] + label:before,
.r0 input[type="radio"] + label:after {
border-radius: 50%;
}
.r0 input[type="checkbox"]:checked + label:before {
animation: borderscale 200ms ease-in;
background: #4F8196;
}
.r0 input[type="checkbox"]:checked + label:after {
transform: rotate(-45deg) scale(1);
}
.r0.r0-inline {
display: inline-block;
}
.r1 * {
box-sizing: border-box;
}
.r1 *:before,
.r1 *:after {
box-sizing: border-box;
}
.r1 input[type="checkbox"],
.r1 input[type="radio"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.r1 input[type="checkbox"]:focus + label:before,
.r1 input[type="radio"]:focus + label:before,
.r1 input[type="checkbox"]:hover + label:before,
.r1 input[type="radio"]:hover + label:before {
border-color: #4F8196;
background-color: #f2f2f2;
}
.r1 input[type="checkbox"]:active + label:before,
.r1 input[type="radio"]:active + label:before {
transition-duration: 0s;
}
.r1 input[type="checkbox"] + label,
.r1 input[type="radio"] + label {
position: relative;
padding: 5px 5px 5px 2em;
vertical-align: middle;
user-select: none;
cursor: pointer;
}
.r1 input[type="checkbox"] + label:before,
.r1 input[type="radio"] + label:before {
box-sizing: content-box;
content: '';
color: #4F8196;
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 14px;
margin-top: -9px;
border: 2px solid #4F8196;
text-align: center;
transition: all 0.4s ease;
}
.r1 input[type="checkbox"] + label:after,
.r1 input[type="radio"] + label:after {
box-sizing: content-box;
content: '';
background-color: #4F8196;
position: absolute;
top: 50%;
left: 4px;
width: 10px;
height: 10px;
margin-top: -5px;
transform: scale(0);
transform-origin: 50%;
transition: transform 200ms ease-out;
}
.r1 input[type="checkbox"]:disabled + label:before,
.r1 input[type="radio"]:disabled + label:before {
border-color: #cccccc;
}
.r1 input[type="checkbox"]:disabled:focus + label:before,
.r1 input[type="radio"]:disabled:focus + label:before,
.r1 input[type="checkbox"]:disabled:hover + label:before,
.r1 input[type="radio"]:disabled:hover + label:before {
background-color: inherit;
}
.r1 input[type="checkbox"]:disabled:checked + label:before,
.r1 input[type="radio"]:disabled:checked + label:before {
background-color: #cccccc;
}
.r1 input[type="checkbox"] + label:after {
background-color: transparent;
top: 50%;
left: 4px;
width: 8px;
height: 3px;
margin-top: -4px;
border-style: solid;
border-color: #ffffff;
border-width: 0 0 3px 3px;
border-image: none;
transform: rotate(-45deg) scale(0);
}
.r1 input[type="checkbox"]:checked + label:after {
content: '';
transform: rotate(-45deg) scale(1);
transition: transform 200ms ease-out;
}
.r1 input[type="radio"]:checked + label:before {
animation: borderscale 300ms ease-in;
background-color: white;
}
.r1 input[type="radio"]:checked + label:after {
transform: scale(1);
}
.r1 input[type="radio"] + label:before,
.r1 input[type="radio"] + label:after {
border-radius: 50%;
}
.r1 input[type="checkbox"]:checked + label:before {
animation: borderscale 200ms ease-in;
background: #4F8196;
}
.r1 input[type="checkbox"]:checked + label:after {
transform: rotate(-45deg) scale(1);
}
.r1.r1-inline {
display: inline-block;
}
I hope this will help. If you like it and you are a medical student like me ☺️ so, don't forget to visit my quiz site: https://courses.studyntest.com/
