替代他们,我改变了你的标记,使用形式。 JavaScript是没有必要的(除非你需要支持IE8以上的浏览器)
每一个复选框包括它的标签,它是透明的:所以当你点击你实际点击复选框的颜色。所选颜色的不同样式通过:checked伪类应用。
标记
Gray
Red
Green
Blue
CSS:
ul {
list-style: none;
}
li {
position: relative;
height: 40px;
width: 40px;
margin: 5px 0;
}
input {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: .01;
cursor: pointer;
}
label {
display: block;
width: 100%;
height: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-indent: 100%;
overflow: hidden;
}
[name="y"] + label { background: gray; }
[name="r"] + label { background: red; }
[name="g"] + label { background: green; }
[name="b"] + label { background: blue; }
input:checked + label {
border: 5px #fff double;
}
注意:您也可以得到同样的行为,如果你display: none您的复选框和标签上使用一个for属性(在该情况也使用标签上的cursor: pointer以获得更好的可用性)—这里的这种方法的一个例子:http://codepen.io/anon/pen/wGBvq