CODEWITHSUNDEEP
htmlcsscheckbox
Sir_Nik
Sir_Nik

Reputation: 67

CSS custom checkboxes

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!

Upvotes: 0

Views: 438

Answers (3)

SuperDJ
SuperDJ

Reputation: 7661

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>

Upvotes: 1

abney317
abney317

Reputation: 8492

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">

Upvotes: 1

Albondi
Albondi

Reputation: 1151

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

Upvotes: 0

Related Questions