How to change an image on click using CSS alone?

TL;DR!

input[type="checkbox"] {
    content: url('http://placekitten.com/150/160');
    appearance: none;
    display: block;
    width: 150px;
    height: 150px;
}

input[type="checkbox"]:checked {
    content: url('http://placekitten.com/170/180');
}

<input type="checkbox" />

A Pure CSS Solution

Abstract

A checkbox input is a native element served to implement toggle functionality, we can use that to our benefit.

Utilize the :checked pseudo class – attach it to a pseudo element of a checkbox (since you can’t really affect the background of the input itself), and change its background accordingly.

Implementation

input[type="checkbox"]:before {
    content: url('images/icon.png');
    display: block;
    width: 100px;
    height: 100px;
}
input[type="checkbox"]:checked:before {
    content: url('images/another-icon.png');
}

Demo

Here’s a full working demo on jsFiddle to illustrate the approach.

Refactoring

This is a bit cumbersome, and we could make some changes to clean up unnecessary stuff; as we’re not really applying a background image, but instead setting the element’s content, we can omit the pseudo elements and set it directly on the checkbox.

Admittedly, they serve no real purpose here but to mask the native rendering of the checkbox. We could simply remove them, but that would result in a FOUC in best cases, or if we fail to fetch the image, it will simply show a huge checkbox.

Enters the appearance property:

The (-moz-)appearance CSS property is used … to display an element
using a platform-native styling based on the operating system’s theme.

we can override the platform-native styling by assigning appearance: none and bypass that glitch altogether (we would have to account for vendor prefixes, naturally, and the prefix-free form is not supported anywhere, at the moment). The selectors are then simplified, and the code is more robust.

Implementation

input[type="checkbox"] {
    content: url('images/black.cat');
    display: block;
    width: 200px;
    height: 200px;
    -webkit-appearance: none;
}
input[type="checkbox"]:checked {
    content: url('images/white.cat');
}

Demo

Again, a live demo of the refactored version is on jsFiddle.

References

• :checked
• -moz-appearance/-webkit-appearance

Note: this only works on webkit for now, I’m trying to have it fixed for gecko engines also. Will post the updated version once I do.

Update: the appearance property is now widely adopted, so the use of vendor prefixes is redundant. Horay!