CSS multi-select images

9. 6. 2023

html:

<ul class="selectables">
  <label>
    <input type="checkbox">
    <img src="//dummyimage.com/100x100">
  </label>
  <label>
    <input type="checkbox">
    <img src="//dummyimage.com/100x100">
  </label>
  <label>
    <input type="checkbox">
    <img src="//dummyimage.com/100x100">
  </label>
</ul>

css:

ul.selectables li {
  display:inline-block;
}

ul.selectables input {
  display:none;
}

ul.selectables input:checked + img {
  outline:solid 2px red;
}

JS version:
https://jsfiddle.net/9jdgyqvc/

^ Should make html part less verbose, recommended. The ul/li stuff may not be needed (img tag should be enough).

JS version 2 (lazy): https://jsfiddle.net/9jdgyqvc/2/

Thanks to #css/libera irc.

web