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

【问题标题】：How can I change appearance of checkbox button?如何更改复选框按钮的外观？
【发布时间】：2015-01-05 11:39:08
【问题描述】：

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

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

[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 它仍然是简单的灰色正方形。

【问题讨论】：

How to style checkbox using CSS? 的可能重复项
有一些网站可以帮助您，例如：http://www.csscheckbox.com/

标签： jquery html css checkbox

【解决方案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>

【讨论】：

【解决方案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")
}

&lt;input type="checkbox" /&gt;

【讨论】：

我删除了我的答案，因为 OP 说这对他不起作用，我相信他。
我也没有，我没有删除它。它工作正常，谢谢:)
很高兴这对你有帮助 @VladimirJovanovic。
Danield 我试过了，但没有用，现在我尝试了 Jai 的，它出于某种原因可以工作，哈哈
@Danield 实际上你已经删除了你的答案，我在你的评论区发布了一个 js fiddle，我不能因为帖子已被删除，然后我用 sn-p 添加了这个答案.