Question

我想知道如何通过点击它来更改复选框中“框”的颜色。我不想改变标签的颜色，我只想通过点击它来改变盒子的颜色。

 <input type="checkbox" name="1" class="styled green"/> 1
 <input type="checkbox" name="2" class="styled red" checked/> 2
 <input type="checkbox" name="3" class="styled purple" /> 3

Answer 1

通常你不能这样做。你需要使用css和一些javascript，并且必须使用自定义复选框。

其中一个可能的例子是here

Answer 2

这应该可以解决问题（需要进行位测试和微调，尤其是在复选框的状态下）;

// elementbyid shorthand
var $ = function(id) {
    return document.getElementById(id);
};

// this function handles background color
var markCheckbox = function(e) {
    // find id + class name
    var showId = e.target.id;
    var color = e.className
    // change color
    $(id).style.backgroundColor = color;
};

// this gets invoked when page got loaded
window.addEventistener('load', function() {
    var getElements = document.getElementsByTagName('input');
    // loop through all input elements
    for(var i = 0; i < getElements.length; i++) {
        // control if it's a checkbox + bind click event.
        if(getElements[i].type == 'checkbox') {
            (getElements[i].id).addEventListener('click', markCheckbox);
        }
    }
}

Answer 3

我的_¢：

http://roxon.in/scripts/checkbox_radio_custom.html

基本上有几行JS-jQuery，你可以用<span>元素替换复选框。（或者像我在示例链接中那样使用两个，如果你想要花哨的话。）

$(':checkbox').each(function(){
    var $c = $(this);
    $c.hide().after('<span/>');
    $c.next('span').click(function(){
        $c[0].checked^=1;
    });
});

比使用CSS和CSS3动画有创意所需要的只是以下是如何定位SPAN jQuery附加之后隐藏INPUT：

/* target the hidden checkbox's next SPAN element: */
input[type=checkbox] + span{

}
/* Custom checkbox HOVER: */
input[type=checkbox] + span:hover{

}
/* Custom checkbox CHECKED STATE */
input[type=checkbox]:checked + span{

}

玩得开心。

复选框和Css样式颜色

3 个答案: