blsn blsn - 1 month ago 14
HTML Question

CSS to grey a checkbox image if unchecked

CSS of the following is used to replace the regular checkbox element with checked/unchecked images.



.ckbx {
display:none;
}
.ckbx + label {
background:url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
background-size: 100%;
height: 70px;
width: 70px;
padding: 0px;
display:inline-block;
}
.ckbx:checked + label {
background:url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152187_960_720.png') no-repeat;
background-size: 100%;
height: 70px;
width: 70px;
padding: 0px;
display:inline-block;
}

<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>





Instead of using two images I need to use only one image (checked).

For the unchecked state how can I use CSS only to gray the image?

Answer

Use opacity

.ckbx {
  display: none;
}
.ckbx + label {
  background: url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  opacity: 0.3;
}
.ckbx:checked + label {
  opacity: 1;
}
<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>

Or a pseudo

.ckbx {
  display: none;
}
.ckbx + label {
  background: url('https://pixabay.com/static/uploads/photo/2013/07/12/17/40/checkbox-152188_960_720.png') no-repeat;
  background-size: 100%;
  height: 70px;
  width: 70px;
  padding: 0px;
  display: inline-block;
  position: relative;
}
.ckbx + label::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: white;
  opacity: 0.7;
}
.ckbx:checked + label::after {
  opacity: 0;
}
<input type="checkbox" class="ckbx" id="bike">
<label for="bike">I have a bike</label>