How can I change appearance of checkbox button?

Question

I need to change appearance of my checkbox button, precisely i need to place custom background image instead of regular gray square.

Now I tried something like this:

[type="checkbox"] {
  width: 15px;
  height: 15px;
  background-image: url("../images/checkbox.png")
}

[type="checkbox"]:checked {
  width: 15px;
  height: 15px;
  -webkit-appearance: none;
  background-image: url("../images/checkbox-c.png")
}

and it works fine for when checked but while idle it does not change background image to checkbox.png it remains simple gray square.

possible duplicate of [How to style checkbox using CSS?](http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css) — Saif, Jan 05 '15 at 11:40
There are some sites that can help you with this, example: [http://www.csscheckbox.com/](http://www.csscheckbox.com/) — Victor, Jan 05 '15 at 11:45

score 4 · Answer 1 · answered Jan 05 '15 at 11:43

There are a number of approaches, typically involving styling an element which follows the checkbox, on the :checked state, hiding the checkbox, and leveraging off the native behaviour of a label to wrap the result.

label {
  position: relative; /* <-- usually handy to have for styling */
}
label input {
  display: none; /* <-- hide the default checkbox */
}
label span { /* <-- style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked+ span { /* <-- style its checked state */
  background: blue;
}

<label>
  <input type='checkbox'><span></span> Checkbox label</label>

score 2 · Accepted Answer · answered Jan 05 '15 at 11:53

2

Well i don't know why other answer has been deleted but that is most likely to work as it worked for me here:

[type="checkbox"] {
    width: 26px;
    height: 26px;
    -webkit-appearance: none; /*<----this needs to be added here.*/
    background-image: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/unchecked_checkbox.png")
}
[type="checkbox"]:checked {
    width: 26px;
    height: 26px;
    -webkit-appearance: none;
    background-image: url("https://cdn1.iconfinder.com/data/icons/windows8_icons_iconpharm/26/checked_checkbox.png")
}

<input type="checkbox" />

answered Jan 05 '15 at 11:53

Jai

74,255
12
74
103

I deleted my answer because the OP said that it didn't work for him and I believed him. – Danield Jan 05 '15 at 11:57
Neither do I, I did not deleted it. It works fine, thank you :) – Vladimir Jovanovic Jan 05 '15 at 11:57
Danield I tried it and it did not worked, now i tried Jai's and it works for some reason lol – Vladimir Jovanovic Jan 05 '15 at 11:58
@Danield actually you have deleted your answer and i was posting an js fiddle there at your comment area and i was not able to because the post had been deleted, then i added this answer with snippet. – Jai Jan 05 '15 at 11:59
Yes that's fine. Thanks for the thumbs up – Danield Jan 05 '15 at 12:02

How can I change appearance of checkbox button?

2 Answers2