如何更改复选框按钮的外观？

Question

我需要更改我的复选框按钮的外观，确切地说我需要放置自定义背景图像而不是常规的灰色方块。

现在我尝试了这样的事情：

[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")
}

它在选中时工作正常，但在闲置时它不会将背景图像更改为 checkbox.png 它仍然是简单的灰色方块。

Answer 1

有很多方法，通常涉及在 :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>

Answer 2

好吧，我不知道为什么其他答案已被删除，但这最有可能起作用，因为它在这里对我有用：

[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" />

如何更改复选框按钮的外观？

How can I change appearance of checkbox button?

html

css

checkbox

jquery