我想将我的复选框颜色从白色更改为黑色，并将我的勾选颜色从黑色更改为白色。想知道是否可行？
我尝试了背景颜色和颜色属性，但它不起作用。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src=" http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:700normal"/>
<title>Untitled Document</title>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
if(myLayer.checked = true){
myLayer.style.color = "#bff0a1";
} else {
myLayer.style.backgroundColor = "#eee";
};
}
</script>
label {
margin:0px 2px 4px 2px;
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
</head>
<body>
<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>
</body>
</html>
最佳答案
这是我用于“样式化”复选框的内容:http://jsfiddle.net/D8daE/1/
HTML:
<input type="checkbox" id="check1" class="checkbox"><label for="check1"> Example</label>
CSS:
input[type="checkbox"]{
margin-left: 10px;
display: none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: 17px;
position: absolute;
left: 0;
bottom: 1px;
background-color: black;
border-radius: 3px;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 40px;
margin-right: 15px;
font-size: 15px;
}
.checkbox label {
margin-bottom: 10px;
}
.checkbox label:before {
border-radius: 3px;
}
input[type="checkbox"]:checked + label:before {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: white;
text-align: center;
line-height: 15px;
}
它不会为复选框本身设置样式，而是修改复选框的标签。 为了更改框的颜色，将 label:before background 设置为您想要的颜色，为了修改勾号，将 "input[type="checkbox"]:checked + label:before"的颜色设置为任何颜色你需要的颜色。
附言。它是纯 CSS。
关于javascript - 如何将复选框(tickbox)的颜色从白色变为黑色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20339930/