Encountering an unusual problem with the radio buttons due to custom styling. The issue arises when trying to select certain options. Here is the jsfiddle link for reference: http://jsfiddle.net/bm6Lfhdz/1/
Attempt to choose 'Yes' from the second question or 'option 1' from the Fifth question. Clicking on them seems unresponsive. Can anyone help identify what might be incorrect in the code?
The customized CSS being utilized:
div.questions {
margin-bottom: 12px;
border: 1px dotted #fafafa;
padding: 25px 20px;
position: relative;
margin-bottom: 20px;
}
input[type='radio'] {
display: none;
cursor: pointer;
}
input[type='radio']:focus, input[type='radio']:active{
outline: none;
}
input[type='radio']:hover + label:hover {
color: #fff;
}
input[type='radio'] + label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
margin-right: 10px;
color: #0b4c6a;
}
input[type='radio'] + label:before, input[type='radio'] + label:after{
content: '';
font-family: helvetica;
display: inline-block;
width: 18px;
height: 18px;
left: 0;
bottom: 0;
text-align: center;
position: absolute;
}
input[type='radio'] + label:before {
background-color: #fafafa;
-moz-transition: all 0.05s ease-in-out;
-o-transition: all 0.05s ease-in-out;
-webkit-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;
}
input[type='radio'] + label:after {
color: #fff;
}
input[type='radio']:checked + label:before {
-moz-box-shadow: inset 0 0 0 10px #4DD26D;
-webkit-box-shadow: inset 0 0 0 10px #4DD26D;
box-shadow: inset 0 0 0 10px #4DD26D;
}
/*Radio Specific styles*/
input[type='radio'] + label:before {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
input[type='radio'] + label:hover:after, input[type='radio']:checked + label:after {
content: "\2713";
line-height: 18px;
font-size: 14px;
}
}
input[type='radio'] + label:hover:after {
color: #c7c7c7;
}
input[type='radio']:checked + label:after, input[type='radio']:checked + label:hover:after {
color: #fff;
}
Appreciate any assistance,
Please test all options as there have been instances of erratic behavior with the radio button selection.