javascript - 复选框和 Css 样式颜色

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

我的2_美分：

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 动画进行创意。
以下是如何定位在 hidden之后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{

}

玩得开心。