Browser Support for Custom CSS3 Radio Buttons - css

Question

So, I got my custom CSS3 Radio Buttons to work and they look great on my site. They're working in Firefox, and from what I've read, they should work in most modern browsers. However, on my phone (a Galaxy Nexus with Android 4.3), while they work perfectly in Chrome, they do not work on the default vanilla browser (not able to be clicked). I suspect there's also most likely problems in various versions of Internet Explorer (as there always seem to be).
I found a great article about browser support for custom radio buttons, but between all the marked out text and various updates, I can't figure out what exactly the problem is with my buttons & what the simplest solution is.
It seems to me that others might experience the same problem, so I've included my code in hopes that you can help me get to the bottom of this, and that this topic might point others in the right direction in the future. Thank you for your time.
Here's my code:
input[type=radio] {
display:none;
}
input[type=radio] + label:before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
vertical-align:middle;
margin-right: 8px;
background-color: #aaa;
border-radius: 8px;
margin-top: -3.5px;
margin-left: 5%;
}
input[type=radio]:checked + label:before {
content: ""; /* just change color, no bullet */
background-color: #24bbff;
text-align:center;
line-height:14px;
}

Answer 1

I make this pen a while ago and works on android. http://codepen.io/karlprieb/pen/kKjCn
Edit the css for your design and test:
/* RADIO BUTTONS */
[type="radio"] {
visibility: hidden;
}
/* Radio button style */
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
position: relative;
padding-left: 20px;
margin-left: -20px;
cursor: pointer;
}
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
content: '';
position: absolute;
left:0; top: 0 ;
width: 13px; height: 13px;
border: 2px solid #cacaca;
background: #fff;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
/* Checked style */
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
content: '';
position: absolute;
top: 0; left: 0;
width: 17px;
height: 17px;
background: #82cdf5;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
transition: all .2s;
}
/* checked mark aspect changes */
[type="radio"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
[type="radio"]:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* Label hover style */
label:hover:before {
border: 2px solid #82cdf5!important;
}

Answer 2

Custom check box
// Check box
.check-large[type="checkbox"]:checked::-ms-check {
border: 2px solid #aaa;
color: #aaa;
opacity: 1;
font-size: larger;
}
.check-large[type="checkbox"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
/* create custom checkbox appearance */
display: inline-block;
width: 22px;
height: 22px;
padding: 4px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #000000;
opacity: 0.4;
vertical-align: bottom;
}
/* appearance for checked Checkbox */
.check-large[type="checkbox"]:checked , .check-large[type="checkbox"]:disabled:checked{
background-color: #aaa;
border: 2px solid #aaa;
opacity: 1;
}
<input type="checkbox" class="check-large">
<input type="checkbox" class="check-large">
// Radio Button
.radio-large[type="radio"]:checked::-ms-check {
border: 2px solid #aaa;
color: #aaa;
opacity: 1;
font-size: larger;
}
.radio-large[type="radio"] {
/* remove standard background appearance */
-webkit-appearance: none;
-moz-appearance: none;
/* create custom radiobutton appearance */
display: inline-block;
width: 22px;
height: 22px;
padding: 4px;
/* background-color only for content */
background-clip: content-box;
border: 2px solid #000000;
opacity: 0.4;
vertical-align: bottom;
border-radius:50%;
}
/* appearance for checked Radio button */
.radio-large[type="radio"]:checked , .radio-large[type="radio"]:disabled:checked{
background-color: #aaa;
border: 2px solid #aaa;
opacity: 1;
}
<input type="radio" name="radio-check" selected='selected' class="radio-large" >
<input type="radio" name="radio-check" class="radio-large" >
This can be used for the custom radio and checkbox creation.