如何设置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>
答案 0 :(得分:29)
您可以通过<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>
编辑 :请注意,某些颜色选择可能会使复选框的状态对于colourblind人不可见。在制作这段代码时,我没有想到这一点,但上面的演示对于R / G colourblind人来说可能是不可见的。在实现这一点时,请记住这一点(例如选择亮/暗颜色,或在形状上显示一些差异)
我使用的样式只是随意的,您可以将其更改为您想要的任何内容。您甚至可以通过::before
伪元素切换其中的某些文字,例如我所做的here。
我无法打开您在问题中使用的图片网址,但我认为您可以通过简单地修改此代码来包含您想要的任何图像。只需将当前background
颜色更改为您要使用的图片网址。
注意:这不适用于some older browsers。
答案 1 :(得分:15)
上面接受的答案很棒,但是来自Joeytje50的小提琴this slight tweak允许选中复选框。
使用opacity 0而不是display none表示该复选框仍然是tabbable,因此可以通过键盘访问。
绝对位置将输入复选框放在绘制框的左上角,这意味着您的格式保持整洁。
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;
}
&#13;
<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>
&#13;
答案 2 :(得分:8)
这tutsplus tutorial解决了我的问题。
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>
答案 3 :(得分:1)
使用纯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;
}
&#13;