css - 复选框样式

Question

有没有办法给一个复选框和一个带边框的标签设置样式，这样用户只能看到标签（复选框是隐藏的），当用户点击标签时，标签会改变背景和文本的颜色? 此单击也应与单击复选框一样起作用。如果有办法，我该怎么做？

或者

如何隐藏复选框并只留下标签来改变颜色？

score 5 · Accepted Answer

将它们并排放置（在 html 结构中）并使用相邻的兄弟选择器+

像这样的东西

html

<input type="checkbox" id="box1" />
<label for="box1">checkbox #1</label>

css

input[type="checkbox"]{
    position:absolute;
    visibility:hidden;
    z-index:-1;
}
input[type="checkbox"]:checked + label{
    color:red;
}

当然，您可以根据需要设置标签（第二条规则）的样式..

1 回答 1