0

Hola estoy intentando agregar un checkbox a mi formulario de registro, he probado varias configuraciones y creo que puede ser un tema de estilos, parece que algo estuviera superpuesto sobre el checkbox y no me permite interactuar con el.

input, select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

#registro input[type="checkbox"] {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  z-index: 1000;
}
<div id="registro">
  <form method="post" action="#">
    <div class="row gtr-uniform">
      <div class="col-6 col-12-xsmall">
        <input type="nombre" name="nombre" id="nombre" value="" placeholder="Nomnbre" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="email" name="email" id="email" value="" placeholder="Email" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="password" name="password" id="password" value="" placeholder="Contraseña" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="password" name="password2" id="password2" value="" placeholder="Repite tu Contraseña" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="date" name="fecha_nacimiento" id="fecha_nacimiento" value="" placeholder="Fecha de Nacimiento" />
      </div>
      <!-- Desplegables con region, provincia y comuna -->
      <!-- Listas desplegables -->
      <select id="regiones" name="regiones">
      </select>
      <select id="provincias" disabled>
      </select>
      <select id="comunas" disabled>
      </select>
      <!-- Botón de Acceso -->
      <div class="col-12">
        <ul class="actions special">
          <li><input type="submit" value="Registrate" class="primary" /></li>
          <li><input type="reset" value="Limpiar" /></li>
        </ul>
      </div>
      <input type="checkbox" id="acepta_politicas" name="acepta_politicas" required>
      <label for="acepta_politicas">Acepto las <a href="#" target="_blank">políticas de privacidad y de uso</a> del sitio web.</label>
    </div>
  </form>
</div>

este es mi formulario y este es el css del checkbox

el checkbox se ve pero no puedo marcarlo, se agradece cualquier ayuda!

10
  • 2
    que checkbox?? el se aceptar?? aca funciona ;)
    – gbianchi
    Commented el 22 ene. a las 14:46
  • Si, pero con el css en el sitio web no funciona, y no se porque
    – Rodrigo
    Commented el 22 ene. a las 15:22
  • claro.. pero aca, no podemos hacer magia y reproducir un problema que no estas mostrando... ;) por lo pronto, lo que mostras funciona.. hay algo en otro lado...
    – gbianchi
    Commented el 22 ene. a las 15:44
  • @Rodrigo en tu página web, donde ves el fallo, pulsa con el botón derecho sobre el checkbox y dale a inspeccionar elemento. Cuando se abra la consola de desarrollador, mira los estilos que se están aplicando al checkbox, tienen que aparecer los estilos que estás dando y algo más. Puede incluso que no aparezcan tus estilos y que sean los estilo de otro elemento que está tapando el checkbox (¿es por eso por lo que añadías el z-index?)
    – Alvaro Montoro
    Commented el 22 ene. a las 16:23
  • Pon la susodicha web y la reviso.
    – OCHOA
    Commented el 22 ene. a las 17:20

1 respuesta 1

0

El problema está en tu main.css que tienes los siguientes estilos:

input, select, textarea {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

Con esa regla estás haciendo que los input, select y textarea no tengan la apariencia que tienen por defecto y se puedan dar estilos de forma más sencilla.

Todo correcto hasta ahí. Y defines tus propios estilos para el checkbox:

#registro input[type="checkbox"] {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  z-index: 1000;
}

Entonces, ¿cuál es el problema? ¡Que no estás definiendo estilos para cuando el checkbox esté marcado! Entonces, aunque el checkbox está marcado, se sigue ver sin marcar... ¡pero está marcado!

La solución: añade estilos para cuando el checkbox esté marcado. Esto se puede hacer con la pseudo-clase :checked:

#registro input[type="checkbox"]:checked {
  /* estilos para cuando el checkbox esté marcado */
}

Aquí puedes verlo aplicado a la demo compartida en la pregunta:

input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
}

#registro input[type="checkbox"] {
  display: inline-block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  border: 1px solid #000000;
  border-radius: 5px;
  background-color: #fff;
  position: relative;
  z-index: 1000;
}

#registro input[type="checkbox"]:checked {
  background-color: #369;
  box-shadow: inset 0 0 0 3px #fff;
}
<div id="registro">
  <form method="post" action="#">
    <div class="row gtr-uniform">
      <div class="col-6 col-12-xsmall">
        <input type="nombre" name="nombre" id="nombre" value="" placeholder="Nomnbre" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="email" name="email" id="email" value="" placeholder="Email" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="password" name="password" id="password" value="" placeholder="Contraseña" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="password" name="password2" id="password2" value="" placeholder="Repite tu Contraseña" />
      </div>
      <div class="col-6 col-12-xsmall">
        <input type="date" name="fecha_nacimiento" id="fecha_nacimiento" value="" placeholder="Fecha de Nacimiento" />
      </div>
      <!-- Desplegables con region, provincia y comuna -->
      <!-- Listas desplegables -->
      <select id="regiones" name="regiones">
      </select>
      <select id="provincias" disabled>
      </select>
      <select id="comunas" disabled>
      </select>
      <!-- Botón de Acceso -->
      <div class="col-12">
        <ul class="actions special">
          <li><input type="submit" value="Registrate" class="primary" /></li>
          <li><input type="reset" value="Limpiar" /></li>
        </ul>
      </div>
      <input type="checkbox" id="acepta_politicas" name="acepta_politicas" required>
      <label for="acepta_politicas">Acepto las <a href="#" target="_blank">políticas de privacidad y de uso</a> del sitio web.</label>
    </div>
  </form>
</div>

1
  • 1
    Excelente explicación, muchas gracias! se soluciono el problema! ...
    – Rodrigo
    Commented el 22 ene. a las 23:12

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.