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.
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.