CODEWITHSUNDEEP
htmlcsscheckbox
Yagel
Yagel

Reputation: 1312

How to make checkboxes with images

I have default checkboxes on my website, with only text on every checkbox(e.g. example).

Does it possible to design the checkboxes to have images on them? and maybe to put "v" mark on a checkbox if it been chosen?

I want it to look something like: enter image description here

Upvotes: 0

Views: 1560

Answers (2)

lfalin
lfalin

Reputation: 4304

I don't think most people put images in their checkboxes. They either make an image act like a checkbox like @LGSon did, or they wrap an image and checkbox together inside of a div. Something like this:

function toggleCheck(sibling) {
  var checkBox = sibling.parentNode.getElementsByTagName("input")[0];
  checkBox.checked = !checkBox.checked;
}
.image-box {
  width: 150px;
  text-align: center;
  background: #E9E8E7;
  padding: 10px;
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
  border-radius: 5px 5px 5px 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
}
.image-box img {
  max-width: 100%;
  display: block;
  margin-bottom: 7px;
}
<div class="image-box">
  <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" />
  <input id="dogs" type="checkbox" name="dogs" value="Dog">
  <label for="dogs">I like dogs</label>
</div>

Upvotes: 1

Asons
Asons

Reputation: 87191

This is how you can simulate an image based checkbox using a label

input {
  display: none
}

/*  switch image  */
label[for="chk1"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  background: url(http://placehold.it/100/f00);
}
#chk1:checked ~ label[for="chk1"] {
  background: url(http://placehold.it/100/ff0);
}

/*  add content  */
label[for="chk2"] {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  border: 2px solid black;
  position: relative;
}
#chk2:checked ~ label[for="chk2"]::after {
  content: 'V';
  position: absolute;
  left: 0;
  right: 0;
  font-size: 90px;
  font-weight: bold;
  font-family: arial;
}
<input id="chk1" type="checkbox">
<input id="chk2" type="checkbox">

<label for="chk1"></label>
<label for="chk2"></label>

<div>Click a box to toggle it</div>

Upvotes: 2

Related Questions