0

Estoy utilizando Bootstrap para los estilos y me he fijado que al poner un checkbox este no se muestra en pantalla.

Solo me pasa con google chrome.

introducir la descripción de la imagen aquí

Este es mi codigo html y css de esa parte.

.bootstrap-switch input[type='radio'],
.bootstrap-switch input[type='checkbox'] {
  filter: alpha(opacity=0);
  left: 0;
  margin: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  z-index: -1;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
<div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-6">
                <h1 class="m-0 text-dark">Inicio </h1>
                <div class="form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
              </div><!-- /.col -->
            </div><!-- /.row -->
          </div><!-- /.container-fluid -->

Por que podría pasar esto? Lo curioso es que fuera de mi programa si funciona bien.

4
  • Puedes escribir el código en forma de texto y el css relevante?
    – milmal
    Commented el 19 oct. 2020 a las 17:54
  • Tienes que mostrar los codigos relacionados, copiandolos y pegandolos en formato.
    – Excorpion
    Commented el 19 oct. 2020 a las 17:56
  • 2
    No hay problema con el código que muestras. Creo que tienes algo en el css que "sobrescribir" el css de checkbox.
    – milmal
    Commented el 19 oct. 2020 a las 19:20
  • No veo que pase nada en firefox, tal vez sea un problema específico de chrome Commented el 19 oct. 2020 a las 19:36

1 respuesta 1

-1

Prueba a darle alto, ancho y alineación:

.form-check {
  width: 1em;
  height: 1em;
  vertical-align: top;
}
<div class="container-fluid">
  <div class="row mb-2">
    <div class="col-sm-6">
      <h1 class="m-0 text-dark">Inicio </h1>
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container-fluid -->

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.