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的本机行为来包装结果

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

2 个答案: