How to create checkboxes with CSS Grid
The CSS Grid Layout Module can not only solve the problem of massive layout, but also solve well how to create a label checkbox (check box). Although there is a relatively simple method to create labels that appear after the check box, it is not easy to create labels that appear before the checkbox.
- Enable the Check Box feature to conveniently select files
How to create a checkbox without CSS Grid
Creating a label after the checkbox is something that developers have done for a long time. This technique is one of the main and old but powerful examples that CSS can own.
Below is the code that many people are familiar with, create a label after the selected checkbox:
HTML:
<
input
type
=
"checkbox"
>
<
label
>label for the checkbox label
>
CSS:
input:checked + label {
/* style me */
}
A label after the checkbox will look like this (however, you can use another style):
The above CSS code uses adjacent sibling combinator set marked by + key. When the checkbox is in the status: checked , an element after it (usually label) can be styled using this method.
This is a simple and effective technique. The set of adjacent siblings selects the next element , which means the label must come after the checkbox in the HTML source code. So, to create a label that appears before the checkbox on the screen, we cannot move it before the checkbox in the source code, because the sibling selector did not exist in CSS. Which leaves only one option: repositioning the checkbox and label using transforms, position, margin or another CSS attribute, so the label will appear on the left checkbox on the screen.
Problems with traditional methods
There is no problem with the technique above but it may not work in certain situations such as the reorder positions of the checkbox and label making it inactive. For example, you may have to resize or reposition the checkbox according to the device it is displayed on. When that happens, you also need to reposition the label because it doesn't automatically sort to fit the relocation or resizing of the checkbox.
We can eliminate this disadvantage if we provide some solid layouts for the checkbox and label, instead of locating them on the page. However, most layout systems, such as tables or columns, require you to add a pre-checkbox mark in the source code to make it appear the same way on the screen. That's what we don't want to do because the next element selector on label will stop working.
On the other hand, the CSS Grid is a layout system regardless of the position or order of the elements in the source code. Therefore, the CSS Grid is an ideal solution for attaching labels that appear before the checkbox.
How to create checkboxes with CSS Grid
Let's start with HTML code . The order of checkbox and label will remain the same. We just need to add both to a grid.
HTML
<
div
id
=
"cbgrid"
>
<
input
type
=
"checkbox"
>
<
label
>label for the checkbox label
>
div
>
The attached CSS is as follows:
#cbgrid {
display
: grid;
grid-template-areas:
"left right"
;
width
:
150px
;
}
input[type=checkbox] {
grid-area:
right
;
}
label {
grid-area:
left
;
}
Basically, the display: grid attribute turns an element into a grid container , grid-area defining the grid area that an element belongs to and grid-template-areas constitutes a grid diagram consisting of different grid areas. .
In the above code, there are two grid areas: " left " and " right ", they will form two columns of a grid row. Checkbox belongs to " right " and label area belongs to " left " area.
Since we do not change the checkbox and label relative position in the source code, we can still use the adjacent sibling combination:
CSS
input:checked + label {
/* style me */
}
Note that a grid item is always blocked, it appears with a box around it called a grid-level box . If you don't want that, the example for a label places a wrapper on that item (wraps it in another element) and turns it into the grid area.
I wish you all success!
You should read it
- How to create a checkbox in Word
- Inserting traces into Word
- Instructions for inserting checkboxes in PowerPoint
- Use CSS Grid for a magazine-style layout
- Layout in HTML
- How to create a checklist in Google Docs
- Why can't the bot check the 'I'm not a robot' checkbox?
- FLOAT and CLEAR properties in CSS
- How to turn off Checkbox on File Explorer Windows 11
- How to create a custom keyboard layout for Windows 10
- How to create a grid in Photoshop
- How to Create Labels in the Gmail App