变化选择框支票影像自定义图像变化选择框支票影像自定义图像(Change checkbox check

我试图更改默认的“盒子形象”与CSS的复选框，但它不工作。有没有办法解决？

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

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

Answer 1:

尝试：

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

Answer 2:

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

Answer 3:

我创建了使用纯CSS小提琴。最投票回答不处理单击事件，将无法正常工作，因为该复选框值不会改变。

这是我的例子：

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编码的图像。

我希望它是有用的。

Answer 4:

我找到了另一种方式，不使用邻近的标签或周围的div。

我用例是，我有一个降价解析器，它会生成这些漂亮的待办事项清单和我想他们的风格。更改生成的HTML是不是一个选项，所以我想出了这个解决方案：

给出这样一个复选框：

<input type="checkbox" id="cb">

你可以用它样式visibility: hidden的复选框， visibility: visible于::后，像这样的：

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

复选框工作就像正常的，你可以风格反正你喜欢。

也许这会帮助someody（我可以书签，因为我还没有发现这样的事情在网络上）

Answer 5:

也许会用不太有用我的样本。

<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;
        }
    }

文章来源: Change checkbox check image to custom image