Pure CSS checkbox image replacement

Question

I've got a checkbox list in a table. (one of a number of CB's on the row)

 <tr><td><input type="checkbox" class="custom_image" value="1" id="CB1" /><label for='CB1'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="2" id="CB2" /><label for='CB2'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="3" id="CB3" /><label for='CB3'>&nbsp;</label></td></tr>
 <tr><td><input type="checkbox" class="custom_image" value="4" id="CB4" /><label for='CB4'>&nbsp;</label></td></tr>

I'd like to replace the checkbox image with a pair of custom on/off images and I was wondering if anyone had some better understanding of how to do this with CSS?

I've found this "CSS ninja" tutorial, but I'll have to admit to finding it a bit complex for me. http://www.thecssninja.com/css/custom-inputs-using-css

As far as I can tell, you're allowed to use a pseudo class

 td:not(#foo) > input[type=checkbox] + label
 {
     background: url('/images/off.png') 0 0px no-repeat;
     height: 16px;
     padding: 0 0 0 0px;
 }

My expectation was that by adding the above CSS the checkbox would at least default to displaying the image in the OFF state and then I'd add the following to get the ON

 td:not(#foo) > input[type=checkbox]:checked + label {
     background: url('/images/on.png') 0 0px no-repeat;
 }

Unfortunately, it seems I'm missing a critical step somewhere. I've tried to use the custom CSS3 selector syntax to match my current setup - but must be missing something (The images are size 16x16 if that matters)

http://www.w3.org/TR/css3-selectors/#checked

EDIT: I'd been missing something in the tutorial where he applies the image change to the label and not the input itself. I'm still not getting the expected swapped image for checkbox result on page, but think I'm closer.

There is a jQuery plugin called Uniform which does a very nice job of this. — Matt Sherman
– Matt Sherman, Commented Sep 22, 2010 at 18:07
sadly we're using prototype and I can't change that (the knock on effects would be crippling). I'd look for a prototype plugin (fancy forms) ... but part of my "personal" goal is to get it to work using the non-js method. I know it can be done (see tutorial) I feel like I'm close... and I think that knowing how to do it would improve my ability to work with future, similar tasks. Obviously, if it's square-peg-round-hole impossible I'll give up and move to a JS trick of some kind. — Alex C
– Alex C, Commented Sep 22, 2010 at 18:45
Wait — "Pure CSS" as in CSS without images or CSS without Javascript? — arbales
– arbales, Commented Sep 22, 2010 at 19:22
oh - i meant "semi pure" i'm definitely using images at the moment, but I suppose it'd be possible to use a "data / mime " tag to put the image inside the CSS. (i saw an article on that recently, though the exact location eludes me at the moment) — Alex C
– Alex C, Commented Sep 22, 2010 at 20:19
Wait, "Pure CSS" as in CSS with javascript and/or extra dom nodes? — canon
– canon, Commented Jun 1, 2012 at 2:53

raveren · Accepted Answer · 2014-02-26 10:15:29Z

125

You are close already. Just make sure to hide the checkbox and associate it with a label you style via input[checkbox] + label

Complete Code: http://gist.github.com/592332

JSFiddle: http://jsfiddle.net/4huzr/

edited Feb 26, 2014 at 10:15

raveren

18.8k12 gold badges74 silver badges89 bronze badges

answered Sep 22, 2010 at 19:30

arbales

5,5365 gold badges35 silver badges40 bronze badges

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

4 Comments

Mo Valipour Over a year ago

This relies on label element, that can be missing. see my answer below.

gdbj Over a year ago

I think if you set opacity to 0 instead, you can still achieve the tab stop behaviour. Not 100% on that tho.

Ajay Gopal Shrestha Over a year ago

without name and for jsfiddle.net/ajshres/4huzr/2486 when using for large table could be handy when using against ajax

j4k3 Over a year ago

@Valipour Objection rejected. If your checkbox has no label, put a label on your checkbox. That fixes your UI and WAG problems in the same swoop.

Mo Valipour · Accepted Answer · 2012-08-07 16:48:31Z

47

Using javascript seems to be unnecessary if you choose CSS3.

By using :before selector, you can do this in two lines of CSS. (no script involved).

Another advantage of this approach is that it does not rely on <label> tag and works even it is missing.

Note: in browsers without CSS3 support, checkboxes will look normal. (backward compatible).

input[type=checkbox]:before { content:""; display:inline-block; width:12px; height:12px; background:red; }
input[type=checkbox]:checked:before { background:green; }

You can see a demo here: http://jsfiddle.net/hqZt6/1/

and this one with images:

http://jsfiddle.net/hqZt6/6/

edited Aug 7, 2012 at 16:48

answered Aug 7, 2012 at 16:34

Mo Valipour

13.5k13 gold badges64 silver badges87 bronze badges

6 Comments

Murray Rowan Over a year ago

This looks very promising but, alas, it doesn't seem to be working on Firefox 14.0.1 Mac

Jimbali Over a year ago

OK I just found out that this can be fixed by setting the checkbox to visibility: hidden and the :before to visibility: visible. I assume that this breaks the backward compatibility though.

raveren Over a year ago

The jsfiddles, they do nothing. Shows up as normal checkboxes. Firefox 27.

Michael Scheper Over a year ago

Same with Windows (sorry, have to use it at work): Works in Chrome 35 but not Firefox 30.

Oleg Korzhukov Over a year ago

If anyone is wondering why this does not work in modern browsers: It does not work because <input> cannot have :before and :after pseudo-elements.

|

Vương Hữu Thiện · Accepted Answer · 2022-03-23 16:25:56Z

Use Images Like Checkboxes and Radios Pure Css

* {
  font-family: Lato;
  margin: 0;
  padding: 0;
  --transition: 0.15s;
  --border-radius: 0.5rem;
  --background: #ffc107;
  --box-shadow: #ffc107;
}

.cont-bg {
  min-height: 100vh;
  background-image: radial-gradient(
    circle farthest-corner at 7.2% 13.6%,
    rgba(37, 249, 245, 1) 0%,
    rgba(8, 70, 218, 1) 90%
  );
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cont-title {
  color: white;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.cont-main {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.cont-checkbox {
  width: 150px;
  height: 100px;
  border-radius: var(--border-radius);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  background: white;
  transition: transform var(--transition);
}

.cont-checkbox:first-of-type {
  margin-bottom: 0.75rem;
  margin-right: 0.75rem;
}

.cont-checkbox:active {
  transform: scale(0.9);
}

input {
  display: none;
}

input:checked + label {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--background);
}

input:checked + label img {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}

input:checked + label .cover-checkbox {
  opacity: 1;
  transform: scale(1);
}

input:checked + label .cover-checkbox svg {
  stroke-dashoffset: 0;
}

label {
  display: inline-block;
  cursor: pointer;
  border-radius: var(--border-radius);
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.6;
}

label img {
  width: 100%;
  height: 70%;
  object-fit: cover;
  clip-path: polygon(0% 0%, 100% 0, 100% 81%, 50% 100%, 0 81%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

label .cover-checkbox {
  position: absolute;
  right: 5px;
  top: 3px;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--box-shadow);
  border: 2px solid #fff;
  transition: transform var(--transition),
    opacity calc(var(--transition) * 1.2) linear;
  opacity: 0;
  transform: scale(0);
}

label .cover-checkbox svg {
  width: 13px;
  height: 11px;
  display: inline-block;
  vertical-align: top;
  fill: none;
  margin: 5px 0 0 3px;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  transition: stroke-dashoffset 0.4s ease var(--transition);
  stroke-dashoffset: 16px;
}

label .info {
  text-align: center;
  margin-top: 0.2rem;
  font-weight: 600;
  font-size: 0.8rem;
}

<div class="cont-bg">
  <div class="cont-title">Checkbox</div>
  <div class="cont-main">
    <div class="cont-checkbox">
      <input type="checkbox" id="myCheckbox-1" />
      <label for="myCheckbox-1">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Mazda MX-5 Miata</div>
      </label>
    </div>
    <div class="cont-checkbox">
      <input type="checkbox" id="myCheckbox-2" />
      <label for="myCheckbox-2">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Toyota Supra</div>
      </label>
    </div>
  </div>
  <div class="cont-title">Radio</div>
  <div class="cont-main">
    <div class="cont-checkbox">
      <input type="radio" name="myRadio" id="myRadio-1" />
      <label for="myRadio-1">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2021-mazda-mx-5-miata-mmp-1-1593459650.jpg?crop=0.781xw:0.739xh;0.109xw,0.0968xh&resize=480:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Mazda MX-5 Miata</div>
      </label>
    </div>
    <div class="cont-checkbox">
      <input type="radio" name="myRadio" id="myRadio-2" />
      <label for="myRadio-2">
        <img
          src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/2020-chevrolet-corvette-c8-102-1571146873.jpg?crop=0.548xw:0.411xh;0.255xw,0.321xh&resize=980:*"
        />
        <span class="cover-checkbox">
          <svg viewBox="0 0 12 10">
            <polyline points="1.5 6 4.5 9 10.5 1"></polyline>
          </svg>
        </span>
        <div class="info">Toyota Supra</div>
      </label>
    </div>
  </div>
</div>

It is good that you answered with a real world example. But it is always good to post or at least point out the actual/core technic instead of leaving that to the poor guy (me!).. out of all the above 200 lines, I'm pretty sure the actual logic will be in handful of lines.

Collectives™ on Stack Overflow

Pure CSS checkbox image replacement

3 Answers 3

4 Comments

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related