HTML/CSS Disguise DIV as checkbox

Question

I am trying to create DIV elements that function like checkboxes. The reason I am needing them to be checkboxes is because I will use them to gather information for processing in a PHP form later. I am not sure what is going on but it is not functioning like I imagined. Here is the sample code below. I also made a CodePin to play with.

(note only the first one is setup to act like a checkbox, I can format others later.)

HTML:

<div id='grid'>
    <input type="checkbox" value="2" id="r2">
    <label class="tile" for="r2">
      <div class="title">
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Laura Test</div>
      </div>
    </label>
    <div id='tile'>
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Jayson Test</div>
    </div>
    <div id='tile'>
        <img class='tile_pic' src='../resources/pics/default.png'>
        <div class='tile_title'>Gabriel Test</div>
    </div>
</div>

CSS:

#grid input[type=checkbox] {display: none;}
#grid input[type=checkbox]:checked + .whatever{background-color: green;}

#grid {
  max-width: 1880px;
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;}

#tile {
  width: 150px; height: 190px;
  font-size: 1rem;
  background-color: white;
  border-radius: 4%;
  overflow: hidden;
  text-align: center;
  box-shadow: 3px 4px #CECECE}
  #tile img{max-width: 100%; max-height: 100%; display: block;}
  #tile:hover {background-color: #BFB3E6; box-shadow: 3px 4px #9E999E}

.tile_pic{
  width: 150px;
  height: 150px;
  object-fit: cover;}

.tile_title {
  margin-top: 10px;
  font-family: 'Rubik', sans-serif;}

  @media (min-width: 430px) {#grid { grid-template-columns: repeat(2, 1fr); }}
  @media (min-width: 660px) {#grid { grid-template-columns: repeat(3, 1fr); }}
  @media (min-width: 890px) {#grid { grid-template-columns: repeat(4, 1fr); }}
  @media (min-width: 1120px) {#grid { grid-template-columns: repeat(5, 1fr); }}
  @media (min-width: 1350px) {#grid { grid-template-columns: repeat(6, 1fr); }}
  @media (min-width: 1580px) {#grid { grid-template-columns: repeat(7, 1fr); }}

controlol · Accepted Answer · 2021-02-21T23:25:10.213

Here I created a simple checkbox with animation using html and css only. Changing the div is possible because it lives within the label tag. The label can be used to change the checked state of an input. Using a tilde we can select a subsequent-sibling of an element (source). In this example the label sibbling has to be selected after which we can select the class inside it.

The input should be hidden, for this reason the hidden class was created. A class was created for the div we want to change the css from. In this example I created a simple checkbox that changes when it is checked, but of course any css can be applied.

I hope this helps you with your problem. If you need additional help let me know :)

.hidden {
  display: none;
}

.divcheckbox {
  cursor: pointer;
  position: relative;
  border-radius: .2em;
  width: 2em;
  height: 2em;
  background-color: crimson;
  transition: background-color .2s;
}

.divcheckbox::after,
.divcheckbox::before {
  content: '';
  position: absolute;
  background-color: white;
  height: .2em;
  transition: .2s ease-in-out;
}

.divcheckbox::after {
  top: .95em;
  left: .25em;
  transform: rotateZ(45deg);
  width: 1.5em;
}

.divcheckbox::before {
  top: .95em;
  left: .25em;
  transform: rotateZ(-45deg);
  width: 1.5em;
}

input:checked ~ label .divcheckbox {
  background-color: cornflowerblue;
}

input:checked ~ label .divcheckbox::before {
  top: 1em;
  left: .6em;
  width: 1.25em;
}

input:checked ~ label .divcheckbox::after {
  top: 1.2em;
  left: .2em;
  width: .8em;
}

 <input type="checkbox" class="hidden" id="checkbox" checked/>
<label for="checkbox"> <div class="divcheckbox"></div> </label>

HTML/CSS Disguise DIV as checkbox

1 Answers1