20

How do I style a checkbox in firefox, and have the checkmark and border disappear?

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>
4

4 回答 4

31

有一种非常简单的方法可以通过<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伪元素切换其中的某些文本，例如我在这里所做的。

我无法打开您在问题中提供的图片网址，但我认为您只需稍微修改此代码即可包含您想要的任何图片。只需将当前background颜色更改为您要使用的图像 URL。

注意：这在某些较旧的浏览器中不起作用。

于 2014-02-18T19:07:58.290 回答
19

上面接受的答案很好，但是Joeytje50 对小提琴的这种轻微调整允许选中复选框。

使用 opacity 0 而不是 display none 意味着该复选框仍然是可选项卡，因此可以通过键盘访问。

绝对位置将输入复选框放置在绘制框的左上方，这意味着您的格式保持整洁。

input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}
input[type="checkbox"] + label {
    text-align:center;
    cursor:pointer;
}
input[type="checkbox"]:focus + label {
    background-color: #ddd;
}
input[type="checkbox"] + label div {
    display:inline-block;
    line-height: 16px;
    font-size: 12px;
    height: 16px;
    width: 16px;
    margin:-0px 4px 0 0;
    border: 1px solid black;
    color: transparent;
}
input[type="checkbox"]:checked + label div {
    color: black;
}
<input type="checkbox" id="c1" name="cc" />
<label for="c1">
    <div>&#x2714;</div>Check Box 1<br />
</label>
<input type="checkbox" id="c12" name="cc" />
<label for="c12">
    <div>&#x2714;</div>Check Box 2<br />
</label>

于 2014-07-16T19:19:52.800 回答
8

这个tutsplus 教程解决了我的问题。

input[type="checkbox"] {
  display:none;
}
 
input[type="checkbox"] + label span {
  display:inline-block;
  width:19px;
  height:19px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
  cursor:pointer;
}
input[type="checkbox"]:checked + label span {
  background:url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}
<input type="checkbox" id="c1" name="cc" />
<label for="c1"><span></span>Check Box 1</label>

于 2014-02-18T18:57:12.583 回答
3

恕我直言，使用纯 css 重绘元素的更清洁的解决方案。

密码笔

                input[type="checkbox"] {
            opacity: 0;
            position: absolute;
        }

        input[type="checkbox"] ~ label:before {
          content: '';
          display: inline-block;
          cursor: pointer;
          ...
          border: 3px solid #999;
          border-radius: 2px;
          transition: .3s;
        }

        input[type="checkbox"]:checked ~ label:before {
          background: #333;
        }

于 2017-04-03T16:58:50.083 回答