gpt4 book ai didi

css - 复选框样式

转载 作者:行者123 更新时间:2023-12-02 21:49:12 25 4
gpt4 key购买 nike

有没有办法给一个复选框和一个带边框的标签设置样式,这样用户只能看到标签(复选框被隐藏),当用户点击标签时,标签会改变背景颜色和文字?这个点击也应该像点击复选框一样工作。如果有办法,我应该怎么做?

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

最佳答案

将它们并排放置(在 html 结构中)并使用 adjacent sibling selector +

像这样

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;
}

当然,您可以根据需要设置标签样式(第二条规则)..

演示在 http://jsfiddle.net/kb67J/1/

关于css - 复选框样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18993424/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com