How can I change the look of a button?

Question

I need to change the look of my checkbox button, it is I who need to place an arbitrary background image instead of the usual 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 great when checking, but in standby mode it does not change the background image to checkbox.png it remains a simple gray square.

Answer 1

Well, I don’t know why another answer was deleted, but this will most likely 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" />

Run codeHide result

Answer 2

, , , :checked, label .

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>

Hide result