how to create checkbox image base

Question

I want to create some kind of checkboxes which is totally image base. This means that when I click that image then the border color change to some kind of color: lets say blue and stay blue until the next click which cancel it. The problem is that I don't know from where to start, I have create some kind of checkboxes base image with green mark, but I don't succeed to convert them to my desired request. This is the final result,which I need to get:

The images are hosted on tinypic in the following links: http://i68.tinypic.com/b5496s.jpg http://i67.tinypic.com/2vdk07r.png

This is my code so far, which isn't on the right direction at all:

input[type="checkbox"]:not(old){
  width: 28px;
  margin: 0;
  padding: 0;
  opacity: 0;
}

input[type="checkbox"]:not(old)+label{
  display: inline-block;
  margin-left: -28px;
  padding-left: 28px;
  line-height: 24px;
  background: url(http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/checks.png) no-repeat 0 0;
}

input[type="checkbox"]:not(old):checked + label{
   background-position : 0 -24px;
}

<div class="checkbox">
  <input id="chk1" type="checkbox" name="animal" value="dog"/>
  <label id="lbl1" >Dog</label>
  <br>
  <input id="chk2" type="checkbox" name="animal" value="cat"/>
  <label id="lbl2" >Cat</label>
  <br>
  <input id="chk3" type="checkbox" name="animal" value="horse"/>
  <label id="lbl3" >Horse</label>
</div>

@fcalderan probably a CSS "hack" to apply styling only to modern browsers (which understand the :not() selector). old is a simple selector intended to not match anything. — pawel
– pawel, Commented Mar 7, 2016 at 10:22

pawel · Accepted Answer · 2016-03-07 10:20:19Z

1

Using this HTML:

<label>
  <input type="checkbox" /><img src="//placehold.it/100x100" />
</label>

You can hide the checkbox and style the img based on the :checked pseudoclass and adjacent sibling selector, for example:

/* hiding the checkbox */
input[type="checkbox"] {
  position:absolute;
  opacity:0;
}
/* unchecked state - black border */
input[type="checkbox"] + img {
  border:2px solid #000;
  border-radius:6px;
}
/* checked state - blue border */
input[type="checkbox"]:checked + img {
  border-color:#4df;
}

Demo: https://jsfiddle.net/7zrpr5fd/

answered Mar 7, 2016 at 10:20

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to create checkbox image base

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related