Html 在 Firefox 中为复选框设置样式 — 移除复选和边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19145504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style a checkbox in firefox — remove check and border
提问by jnollette
How do I style a checkbox in firefox, and have the checkmark and border disappear?
如何在 Firefox 中设置复选框样式，并使复选标记和边框消失？
http://jsfiddle.net/moneylotion/qZvtY/
http://jsfiddle.net/moneylotion/qZvtY/
CSS:
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:
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>
采纳答案by jnollette
This tutsplus tutorialsolved my question.
这个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>回答by Joeytje50
There's a quite easy way you can do this via <label>tags. Just place a label around the checkbox, and insert a dummy element that will be used for the custom styled checkbox. For example:
有一种非常简单的方法可以通过<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: '14';
font-size: 20px;
position: absolute;
top: -2px;
left: 5px;
color: #99a1a7;
}<label class="checkbox">
<input type="checkbox"/>
<span></span>
I like cake
</label>EDIT: Note that some choices of colours might render the state of your checkbox invisible for colourblind people. When making this code I didn't think of that, but the above demo might be invisible for R/G colourblind people. When implementing this, please do keep that in mind (pick bright/dark colours for example, or show some difference in shape)
编辑：请注意，某些颜色选择可能会使色盲人士无法看到复选框的状态。在制作这段代码时，我没有想到这一点，但是对于 R/G 色盲的人来说，上面的演示可能是不可见的。在实现这一点时，请记住这一点（例如，选择亮/暗颜色，或在形状上表现出一些差异）
The styles I used are just arbitrary, and you can change that to anything you want. You can even toggle certain text inside it via the ::beforepseudo-element, such as what I've done here.
我使用的样式只是任意的，您可以将其更改为您想要的任何样式。您甚至可以通过::before伪元素切换其中的某些文本，例如我在这里所做的。
I wasn't able to open the image url you provided to use in your question, but I think you'll be able to include whatever image you want by simply modifying this code a little. Just change the current backgroundcolor to the image URL you want to use.
我无法打开您在问题中提供的图片网址，但我认为您只需稍微修改此代码即可包含您想要的任何图片。只需将当前background颜色更改为您要使用的图像 URL。
Note: This won't work in some older browsers.
注意：这在某些较旧的浏览器中不起作用。
回答by Lee Chase
The accepted answer above is great but this slight tweakto the fiddle from Joeytje50 allows the check-boxes to be tabbed to.
上面接受的答案很好，但是对 Joeytje50 的小提琴的这种轻微调整允许将复选框标记为选项卡。
Using opacity 0 instead of display none means the checkbox is still tabbable and hence accessible by keyboard.
使用 opacity 0 而不是 display none 意味着复选框仍然是可选项卡的，因此可以通过键盘访问。
Position absolute places the input checkbox top left of the drawn box meaning your formatting stays neat.
绝对位置将输入复选框放置在绘制框的左上角，这意味着您的格式保持整洁。
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>✔</div>Check Box 1<br />
</label>
<input type="checkbox" id="c12" name="cc" />
<label for="c12">
<div>✔</div>Check Box 2<br />
</label>回答by Scott Romack
A cleaner solution IMHO that uses pure css to redraw the elements.
一个更清洁的解决方案恕我直言，它使用纯 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;
}