35

我正在尝试使用 CSS 更改复选框的默认“框图像”，但它不起作用。有没有办法解决？

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}

<input type="checkbox" class="class_checkbox">
4

5 回答 5

94

您可以使用纯 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">

于 2012-12-19T13:04:11.463 回答
13

尝试：

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

于 2012-04-22T18:58:16.473 回答
9

我使用纯 CSS 创建了一个 Fiddle。投票最多的答案不处理点击事件并且不能正常工作，因为复选框值不会改变。

这是我的例子：

http://jsfiddle.net/kEHGN/1/

基本上，我们需要以下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 编码的图像。

我希望它有用。

于 2013-11-28T14:47:12.480 回答
3

我找到了另一种方法，不使用相邻的标签或周围的 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>

该复选框与普通复选框一样工作，您可以随意设置样式。

也许它会对某些人有所帮助（我可以将其添加为书签，因为我在网上没有找到类似的东西）

于 2017-06-02T19:19:34.203 回答
1

也许对我的 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;
        }
    }
于 2016-12-14T13:53:26.520 回答