我正在尝试使用 CSS 更改复选框的默认“框图像”,但它不起作用。有没有办法解决?
.class_checkbox{
background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}
<input type="checkbox" class="class_checkbox">
您可以使用纯 css,只需在复选框中添加一个标签,如下所示:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
示例 HTML:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
尝试:
<input type="checkbox" class="input_class_checkbox">
jQuery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
小提琴:http: //jsfiddle.net/cn6kn/
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});
.class_checkbox {
width: 20px;
height: 20px;
background-color: red;
}
.class_checkbox.checked {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
我使用纯 CSS 创建了一个 Fiddle。投票最多的答案不处理点击事件并且不能正常工作,因为复选框值不会改变。
这是我的例子:
基本上,我们需要以下html:
<div class="checkbox_wrapper">
<input type="checkbox" />
<label></label>
</div>
以及以下 CSS:
.checkbox_wrapper{
position: relative;
height: 16px;
width: 17px;
}
input[type="checkbox"] {
opacity:0;
height: 16px;
width: 17px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
input[type="checkbox"] + label{
background:url('../images/unchecked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
input[type="checkbox"]:checked + label{
background:url('../images/checked.png') no-repeat;
height: 16px;
width: 17px;
display:inline-block;
padding: 0 0 0 0px;
}
只需检查图像的路线,宽度和高度应该等于图像的宽度和高度。在提琴手上,我使用的是 base64 编码的图像。
我希望它有用。
我找到了另一种方法,不使用相邻的标签或周围的 div。
我的用例是我有一个 Markdown 解析器,它可以生成那些漂亮的 TODO 列表,我想为它们设置样式。更改生成的 HTML 不是一个选项,所以我想出了这个解决方案:
给定一个这样的复选框:
<input type="checkbox" id="cb">
您可以使用visibility: hidden
复选框和visibility: visible
::after 对其进行样式设置,如下所示:
#cb {
visibility: hidden;
}
input#cb::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<input type="checkbox" id="cb">
</body>
</html>
编辑:
@connexo 在评论中指出输入元素不能有内容。可以使用标签元素轻松完成,例如像这样(如果这是错误的,请有人纠正我,我没有方便的非 webkit 浏览器来测试它)。
#cb-span * {
visibility: hidden;
}
input#cb + label::after {
visibility: visible;
content: "F";
color: red;
background: green;
padding: 8px;
}
input#cb:checked + label::after {
content: " T ";
color: green;
background: red;
}
<!doctype html>
<html>
<body>
<span id="cb-span">
<input type="checkbox" id="cb">
<label for="cb"></label>
</span>
</body>
</html>
该复选框与普通复选框一样工作,您可以随意设置样式。
也许它会对某些人有所帮助(我可以将其添加为书签,因为我在网上没有找到类似的东西)
也许对我的 LESS 样本有用。
<div class="custom-checkbox">
<input component="input" type="checkbox"/>
<label>Here is caption right to checkbox</label>
</div>
@imgsize: 25px;
.custom-checkbox{
position: relative;
> input[type="checkbox"] {
display:none;
position: absolute;
top: 0;
left: 0;
+ label{
background:url('../img/unchecked.png') no-repeat 0 0;
background-size:@imgsize;
height: @imgsize;
padding: 4px 0 5px 35px;
display: inline-block;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
transition-duration: 0.3s;
}
}
> input[type="checkbox"]:checked + label{
background:url('../img/checked.png') no-repeat;
background-size:@imgsize @imgsize;
}
}