4

He creado un formulario con distintas columnas y demás, me han aparecido varios fallos, y uno de ellos es en los checkbox. En el anterior formulario que no existían las particiones de la página en forma de columnas, este estilo funcionaba perfecto. Como funcionaba bien, lo copié y pegué adaptándolo al nuevo formato, pero nada.

.checkbox {
    display: block;
    position: relative;
    padding-left: 35px!important;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input {
  width: 13px;
  height: 13px;
  padding: 0;
  margin: 0;
  vertical-align: bottom;
  position: relative;
  top: -1px;
  *overflow: hidden;
}

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark: after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark: after {
  display: inline-block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark: after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
<div class="checkbox">
  <label>
    <input type="checkbox"> 1
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 4
    <span class="checkmark"></span>
  </label>

</div>
<div class="checkbox">
  <label>
    <input type="checkbox"> 2
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 5
    <span class="checkmark"></span>
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"> 3
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 6
    <span class="checkmark"></span>
  </label>
</div>

El problema es que solo me aparece las casillas en uno de los lados, mientras que en el otro no me aparece nada. Aparte, el tick en la casilla no aparece.

introducir la descripción de la imagen aquí

Y una última cuestión, ¿cómo se alinearía el texto del checkbox con la casilla? ¿Qué es lo que está fallando? Le he dado ya unas cuantas vueltas y no puedo encontrar el fallo.

1 respuesta 1

6

Basándome en tu pregunta anterior te respondo a los puntos 1 y 2 que son los errores asociados a los custom checkbox.

1- No te aparece el tick porque la regla CSS en la que tienes definida esa acción tiene una sintaxis errónea, por lo que no se aplica. Las pseudoclases de CSS no deben tener espacio entre el nombre de la pseudoclase y su limitador por lo que en vez de .checkbox input:checked ~ .checkmark: after debes tener .checkbox input:checked ~ .checkmark:after, solucionando esto en las reglas en las que se te produce arreglarías el tick.

2- En este punto tenías varios problemas, sobre todo por el tipo de display que habías elegido para tus elementos en este apartado. Con el uso de display: flex para los elementos .checkbox y .checkbox label conseguirías que se mostrasen correctamente las dos columnas, pero tendrías el problema de que los checkbox de cada una de las dos se colocarían uno encima del otro (por el position: absolute). Con ponerle position: relative a los .checkbox label harías que el position: absolute que tienen los checkbox tomase como referencia cada label, mostrándose correctamente.

Los position puede dar muchos quebraderos de cabeza al principio. Lo más importante que hay que saber es que un elemento con position: absolute toma como referencia el primer ancestro que se encuentre con la propiedad position: relative de tal manera que si le ponemos un top: 0; left: 0; se va a colocar en la esquina superior izquierda de dicho elemento.

.checkbox {
    display: flex;
    position: relative;
    padding-left: 35px!important;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox label {
    position: relative;
    display: flex;
    padding-left: 25px;
    margin-left: 30px;
    justify-content: center;
}

input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkmark:hover {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
    display: inline-block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
<div class="checkbox">
  <label>
    <input type="checkbox"> 1
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 4
    <span class="checkmark"></span>
  </label>

</div>
<div class="checkbox">
  <label>
    <input type="checkbox"> 2
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 5
    <span class="checkmark"></span>
  </label>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"> 3
    <span class="checkmark"></span>
  </label>
  <label>
    <input type="checkbox"> 6
    <span class="checkmark"></span>
  </label>
</div>

EDIT

Adicionalmente tenías un problema con los :hover de tus custom checkbox en el que se te aplicaba el cambio de color en los dos de la misma fila al pasar el puntero por uno de ellos. Con ponerle el :hover a los elementos .checkmark te valdría.

1
  • ¡Muchas gracias! Ahora se ve como quería en un principio
    – Lucía
    el 19 nov. 2019 a las 15:28

Tu Respuesta

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

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