I have created a form with different columns and so on, several errors have appeared, and one of them is in the checkboxes. In the previous form that there were no page partitions in the form of columns, this style worked perfectly. Since it worked fine, I copied and pasted it adapting it to the new format, but nothing.
.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>
The problem is that the boxes only appear on one side, while nothing appears on the other. Besides, the tick in the box does not appear.
And one last question, how would the text of the checkbox be aligned with the box? What is going wrong? I've given it a few spins and I can't find the fault.
Based on your previous question, I will answer points 1 and 2, which are the errors associated with the custom checkboxes.
1- The tick does not appear because the CSS rule in which you have defined that action has an erroneous syntax, so it is not applied. CSS pseudo - classes must not have a space between the name of the pseudo -class and its limiter so instead you must have , solving this in the rules in which it occurs would fix the tick.
.checkbox input:checked ~ .checkmark: after
.checkbox input:checked ~ .checkmark:after
2- At this point you had several problems, especially because of the type of
display
you had chosen for your elements in this section. With the use ofdisplay: flex
for the elements.checkbox
and.checkbox label
you would get the two columns to be displayed correctly, but you would have the problem that the checkboxes of each of the two would be placed one on top of the other (by theposition: absolute
). By puttingposition: relative
them.checkbox label
you would make theposition: absolute
one with the checkboxes take each as a referencelabel
, displaying it correctly.It
position
can give you a lot of headaches at first. The most important thing to know is that an element withposition: absolute
takes as reference the first ancestor that is found with the propertyposition: relative
in such a way that if we put atop: 0; left: 0;
it will be placed in the upper left corner of said element.EDIT
Additionally, you had a problem with
:hover
your custom checkboxes in which the color change was applied to both of the same row when you moved the pointer over one of them. Putting the:hover
to the elements.checkmark
would be worth it.