html中怎么隐藏复选框,隐藏复选框字段HTML

替代他们，我改变了你的标记，使用形式。 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