Este es mi código (ver completo en Codepen):
html {
background: #bbb;
}
.radio-buttons, .checkboxes {
list-style: none;
display: block;
margin: 0 auto;
width: 30%;
height: 200px;
padding: 0;
overflow: hidden;
}
.checkboxes {
height: 400px;
}
.radio-buttons li {
text-align: justify;
display: block;
position: relative;
float: left;
width: 100%;
height: 50px;
color: rgba(255,255,255,0.6);
}
.checkboxes li {
text-align: justify;
display: block;
position: relative;
float: left;
width: 100%;
height: 50px;
color: rgba(255,255,255,0.6);
}
.radio-buttons li input[type='radio'], .checkboxes li input[type='checkbox']{
position: absolute;
visibility: hidden;
}
.radio-buttons li label, .checkboxes li label {
display: block;
position: relative;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 80px;
margin: 10px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
.radio-buttons li:hover label, .checkboxes li:hover label{
color: #FFF;
}
.radio-buttons li .check, .checkboxes li .check{
display: block;
position: absolute;
border: 5px solid rgba(255,255,255,0.6);
border-radius: 100%;
height: 25px;
width: 25px;
top: 30px;
left: 20px;
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
.radio-buttons li:hover .check, .checkboxes li:hover .check {
border: 5px solid #FFF;
}
.radio-buttons li .check::before, .checkboxes li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 15px;
width: 15px;
top: 5px;
left: 5px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type='radio']:checked ~ .check, input[type='checkbox']:checked ~ .check{
border: 5px solid #FFF;
}
.checkboxes ul {
height: 350px;
}
input[type='checkbox'] {
display: none;
}
<form id="survey-form">
<fieldset>
<label>What region do you prefer?</label><br><br>
<ul class="radio-buttons">
<li>
<label for="region">Kanto</label><input type="radio" id="region" name="region" value="kanto">
<div class="check"></div>
</li><br>
<li>
<label for="region">Joto</label><input type="radio" id="region" name="region" value="joto">
<div class="check"></div>
</li><br>
<li>
<label for="region">Hoen</label><input type="radio" id="region" name="region" value="hoen">
<div class="check"></div>
</li><br>
</ul>
</fieldset>
</form>
Funciona el hover y todo pero la propiedad :checked
de input[type='radio']:checked
y input[type='checkbox']:checked
no me está funcionando como debería. En el caso de los radio botones al hacer click me deja marcar solo uno y en el caso de los checkboxes no importa cual apriete siempre se marca el primero de arriba.
También estoy teniendo problemas con el hover del submit input, no pasa a ninguna transición cuando el mouse pasa por encima de él.