CSS custom checkboxes

Question

I have a page with 30 Checkboxes on it. Those are for seat reservation. Now i tried to style them.

.seatlayout{
  border: 1px solid;
  display: table;
  width: 30%;
  padding: 6% 2% 0% 2%;
  border-radius: 5%;
}
.seat{
  position: relative;
  width: 22%;
  margin-bottom: 10%;
  float: left;
  text-align: center;
  border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
  position: relative;
  width: 100%;
  height: 100%;
}

[class^="seatcon"] label,
.seatdis label{
  background-color: #f1f2ed;
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
  z-index:10

}

[class^="seatcon"] input[type="checkbox"]:checked + label
{
  background-color: #66bb6a;
}

.seatdis input[type="checkbox"]:checked + label{
  background-color: grey;
  pointer-events: none
}

[class^="seatcon"] input[type="checkbox"]:checked +  
label:after {
  opacity: 1;
}

<div class="seatlayout">
 <div class="seat">
    <div class="seatcont1">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab1">
    </div>
 </div>
 <div class="seat">
    <div class="seatcont2">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab2">
    </div>
 </div>
 <div class="seat">
    <div class="seatcont3">
       <input type="checkbox id="checkbox">
       <label for="checkbox" id="lab3">
    </div>
 </div>
</div>

Problem No matter on which seat i click on, it always checkes the first one. I tried several approaches adding unique classes and id's while working with wildcards. Any help would be highly apprieciated!

abney317 · Accepted Answer · 2019-02-05 17:35:43Z

1

You've put the same id on all of your checkboxes. You need to give them all a different id. Additionally, you are missing an ending quote on all of your checkboxes after the type.

<input type="checkbox" id="checkbox">
<label for="checkbox" id="lab1">

....

<input type="checkbox" id="checkbox2">
<label for="checkbox2" id="lab1">

answered Feb 5, 2019 at 17:35

abney317

8,5927 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sir_Nik Over a year ago

Thank you very much!! The missing ending quote was a copy paste issue =S

SuperDJ · Accepted Answer · 2019-02-05 17:43:17Z

There are multiple things wrong. The label element is never closed. The label element doesn't need an id it's the for attribute that needs to match the id of the input. Second the input of the checkboxes is never closed by an ". Third the id always needs to be unique, it's a unique identifier. So every input needs to have their own unique id.

.seatlayout{
  border: 1px solid;
  display: table;
  width: 30%;
  padding: 6% 2% 0% 2%;
  border-radius: 5%;
}
.seat{
  position: relative;
  width: 22%;
  margin-bottom: 10%;
  float: left;
  text-align: center;
  border: 1px solid #ccc;
}
[class*='seatcont'],
.seatdis{
  position: relative;
  width: 100%;
  height: 100%;
}

[class^="seatcon"] label,
.seatdis label{
  background-color: #f1f2ed;
  cursor: pointer;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[class^="seatcon"] input[type="checkbox"] ,
.seatdis input[type="checkbox"] {
  z-index:10

}

[class^="seatcon"] input[type="checkbox"]:checked + label
{
  background-color: #66bb6a;
}

.seatdis input[type="checkbox"]:checked + label{
  background-color: grey;
  pointer-events: none
}

[class^="seatcon"] input[type="checkbox"]:checked +  
label:after {
  opacity: 1;
}

<div class="seatlayout">
 <div class="seat">
    <div class="seatcont1">
       <input type="checkbox" id="checkbox1">
       <label for="checkbox1"> 1</label>
    </div>
 </div>
 <div class="seat">
    <div class="seatcont2">
       <input type="checkbox" id="checkbox2">
       <label for="checkbox2"> 2</label>
    </div>
 </div>
 <div class="seat">
    <div class="seatcont3">
       <input type="checkbox" id="checkbox3">
       <label for="checkbox3"> 3</label>
    </div>
 </div>
</div>

Albondi · Accepted Answer · 2019-02-05 17:35:20Z

0

You have the same id for every checkbox. You should use a unique id for each one.

answered Feb 5, 2019 at 17:35

Albondi

1,1511 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

CSS custom checkboxes

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related