Search code examples
htmlcsscss-grid

CSS Custom checkboxes in grid - can't remove original checkbox

I have some checkboxes in a grid and want to use vanilla-css and html to make a custom checkbox. That works fine. The problem is the remaining box of the original checkbox, that stays in my grid and makes it behave in strange ways as it takes a cell. Even when I make it transparent or deactivate it, as it is often suggested.

In the original example they moved it out of the screen area, but I can make it escape the grid.

I think this is the part where it fails to behave like I want to:

[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

Here is a minimal example: https://jsfiddle.net/3mzsLj1v/14/

Here is the example I used: https://css-tricks.com/the-checkbox-hack/

Here is the real code I work on: https://codepen.io/vaeng/pen/XWXKoMb

Thanks for your help. I am sure this is very common, but being a beginner, I might not use css in the correct way?

Solution

  • In both your "minimal" and "real code" examples, your "New Checkboxes" comments are not properly opened.

    In minimal example: Line 23: *New Checkboxes*/ s/b /*New Checkboxes*/

    In real code example: Line 123: * New Checkboxes and radio buttons*/ s/b /* New Checkboxes and radio buttons*/

    If you fix these lines, your code should work as intended.

    Also, I noticed in line 102 that you put // before visibility: hidden;. If you want to comment this line, this syntax is not valid in CSS.