html - 在 Firefox 中设置复选框样式——删除勾选和边框

Question

如何在 firefox 中设置复选框样式，并使复选标记和边框消失？

http://jsfiddle.net/moneylotion/qZvtY/

CSS:

body { background: black; }
#conditions-form { color: white; }
#conditions-form input[type=checkbox] {
    display:inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    width:19px;
    height:19px;
    background: url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox.gif') no-repeat top left;
    cursor:pointer;
}
#conditions-form input[type=checkbox]:checked {
    background:url('http://demo.somedomain.com/wp-content/themes/themename/images/care-plan-checkbox-checked.gif') no-repeat top left;
}

HTML:

<form id="conditions-form">
    <ul>
        <li>
            <input id="condition3" type="checkbox" name="conditions[condition3]"></input>
            <label class="checkbox" for="condition3">Conditions 3</label>
        </li>
    </ul>
</form>

Answer 1

有一种非常简单的方法可以通过 <label> 完成此操作标签。只需在复选框周围放置一个标签，然后插入一个将用于自定义样式复选框的虚拟元素。例如:

label.checkbox input[type="checkbox"] {display:none;}
label.checkbox span {
  display:inline-block;
  border:2px solid #BBB;
  border-radius:10px;
  width:25px;
  height:25px;
  background:#C33;
  vertical-align:middle;
  margin:3px;
  position: relative;
  transition:width 0.1s, height 0.1s, margin 0.1s;
}
label.checkbox :checked + span {
  background:#6F6;
  width:27px;
  height:27px;
  margin: 2px;
}
label.checkbox :checked + span:after {
  content: '\2714';
  font-size: 20px;
  position: absolute;
  top: -2px;
  left: 5px;
  color: #99a1a7;
}

<label class="checkbox">
  <input type="checkbox"/>
  <span></span>
  I like cake
</label>

---

编辑:请注意，某些颜色选择可能会使色盲用户无法看到复选框的状态。在制作这段代码时我没有想到这一点，但上面的演示对于 R/G 色盲的人来说可能是不可见的。执行此操作时，请牢记这一点(例如，选择亮/暗颜色，或显示一些形状差异)

---

我使用的样式是任意的，您可以将其更改为任何您想要的样式。您甚至可以通过 ::before 切换其中的某些文本。伪元素，比如我做过的here .

我无法打开您提供的用于问题的图片 url，但我认为您只需稍微修改此代码就可以包含您想要的任何图片。只需更改当前的 background为您要使用的图片网址添加颜色。

注意:这在 some older browsers 中不起作用.