1

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.

1 respuesta 1

1

El problema es que todos tus radio botones tienen el mismo ID y todos los label apuntan al mismo ID. Debes hacer que los radio botones tengan IDs diferentes y que los label apunten al ID del radio button correspondiente. El name se mantiene igual para todos y de ese modo te aseguras que sólo uno podrá marcarse y será enviado al servidor con el formulario.

En el código que has compartido, he cambiado los IDs para añadirles un número y los label ahora apuntan al ID que deben:

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-1">Kanto</label><input type="radio" id="region-1" name="region" value="kanto">
          <div class="check"></div>
        </li><br>
        <li>
          <label for="region-2">Joto</label><input type="radio" id="region-2" name="region" value="joto">
          <div class="check"></div>
        </li><br>
      <li>
          <label for="region-3">Hoen</label><input type="radio" id="region-3" name="region" value="hoen">
        <div class="check"></div>
        </li><br>
      </ul>
    </fieldset>
 </form>

2
  • Otra opción que podrías hacer es eliminar los IDs y hacer que el label englobe todo dentro del li (el texto del label, el checkbox, y el check). Al estar el input dentro del label se marcará automáticamente sin necesidad de especificar ID en el for.
    – Alvaro Montoro
    Commented el 19 abr. 2019 a las 15:00
  • Si tienes razon, se me paso, pero que tonta soy, muchas gracias. Commented el 19 abr. 2019 a las 15:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.