CODEWITHSUNDEEP
htmlcheckbox
Rafael Munoz
Rafael Munoz

Reputation: 656

Checkbox functionality clicking on images instead of checkboxes

I am building a checkbox to select an employee name among several employees. But since I am showing the employees image,

My code is like that:

HTML /Blade:

@foreach($all_employees as $employee)
<input type="radio" name="employee" value="{{ $employee->id }}">
<img class="img-circle mr-2" src="{{URL::to('/images/' . $employee->img_slug)}}" alt="$employee->firstname">
@endforeach

CSS

.select-mitarbeiter input + img{
  filter: grayscale(100%);
}

.select-mitarbeiter input[checked] + img   {
  filter: grayscale(0%);
}

I want to: - I would like to get rid of the checkbox and click directly on the image itself. - to show the unchecked images in black and white and when I click (check) on an image this one should be shown in colors.

This is what I got now: enter image description here

This is what I want to achieve: enter image description here

But I do not get it. Is it possible to do it without JavaScript just with HTML?

Upvotes: 0

Views: 34

Answers (1)

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

By changing HTML and below css, you can create it

ul {
  list-style-type: none;
}

li {
  display: inline-block;
}

input[type="radio"][id^="radio"] {
  display: none;
}

label {
  border: 1px solid #fff;
  padding: 10px;
  display: block;
  position: relative;
  margin: 10px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

label::before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

label img {
  height: 100px;
  width: 100px;
  border-radius:50%;
  filter: grayscale(100%);
}

:checked+label img {
  filter: grayscale(10%);
}
<ul>
  <li><input type="radio" id="radio1" name="radiocommon" />
    <label for="radio1"><img src="http://lorempixel.com/100/100" /></label>
  </li>
  <li><input type="radio" id="radio2" name="radiocommon" />
    <label for="radio2"><img src="http://lorempixel.com/101/101" /></label>
  </li>
  <li><input type="radio" id="radio3" name="radiocommon" />
    <label for="radio3"><img src="http://lorempixel.com/102/102" /></label>
  </li>
  <li><input type="radio" id="radio4" name="radiocommon" />
    <label for="radio4"><img src="http://lorempixel.com/103/103" /></label>
  </li>
  <li>
  </li>
</ul>

Upvotes: 1

Related Questions