我是新手，所以我希望我问对了这个问题。我很接近得到它，我可以品尝它!!我的目标是消除无聊的默认复选框，这样你就只能看到CSS按钮。
:绝对;去掉了所有中间的输入，这很好，但是第一个和最后一个仍然毫无理由地留在那里(不管我有多少个输入?)由于某种原因，第一个复选框看起来像是浮动在左边，而最后一个复选框只是挂在外面。如果需要，我可以将最后一个复选框从屏幕上推掉，但第一个复选框仍然存在，这似乎不是一个很好的修复方法。任何帮助吗?
HTML:<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link type="text/css" rel="stylesheet" href="my.css">
</head>
<body>
<div id="maindiv">
<input type="checkbox" id="a" value="1"><label for="a">Every</label>
<input type="checkbox" id="b" value="1"><label for="b">Good</label>
<input type="checkbox" id="c" value="1"><label for="c">Boy</label>
<input type="checkbox" id="d" value="1"><label for="d">Deserves</label>
<input type="checkbox" id="e" value="1"><label for="e">Fudge</label>
</div>
</body>
</html>
#maindiv {
}
input[type=checkbox] + label {
text-align: center;
background: yellow;
color: black;
width: 10%;
float: left;
}
input[type=checkbox]:checked + label {
background: orange;
}
input[type=checkbox] + label + input {
position: absolute;
top: 50px;
}
据此，
<label>元素不会为用户呈现任何特殊的内容。但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素中的文本，则会进行切换控制。
所以只要隐藏复选框就可以了。
input[type=checkbox] {
display:none;
}
演示:http://jsfiddle.net/TqW92/
http://jsfiddle.net/xNskB/3/
input[type=checkbox] + label {
background: yellow;
color: black;
float: left;
clear: left;
padding: 0.25em;
margin: 0.5em 0 0 0;
}
input[type=checkbox] + label:first-child {
margin: 0;
}
input[type=checkbox] {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
input[type=checkbox]:checked + label {
background: orange;
}
<div id="maindiv">
<input type="checkbox" id="a" value="1"><label for="a">Every</label>
<input type="checkbox" id="b" value="1"><label for="b">Good</label>
<input type="checkbox" id="c" value="1"><label for="c">Boy</label>
<input type="checkbox" id="d" value="1"><label for="d">Deserves</label>
<input type="checkbox" id="e" value="1"><label for="e">Fudge</label>
</div>