gpt4 book ai didi

html - 单选按钮组检查属性 css 错误

转载 作者:搜寻专家 更新时间:2023-10-31 23:26:22 26 4
gpt4 key购买 nike

我用这样的单选按钮技巧制作了标签

HTML

<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
</div>

然后CSS:

.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}

.tabs input[type=radio]:checked ~ .tabs label {
background: #fff;
border-bottom: 1px solid #fff;
}

这里的问题是当单选按钮被选中时,标签的样式不会改变。谁能帮我解释一下,谢谢

顺便说一句:我使用 IE 8 运行代码。它是否支持检查属性

最佳答案

检查以下是解决方案。将 ~ 替换为 +

.tabs label {
margin-left: -1px;
border: 1px solid;
padding: 0px 80px 0px 80px;
background: #ddd;
}

input[type="radio"]:checked + label {
background: #fff;
border-bottom: 1px solid #fff;
}
<div class="tabs">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<input type="radio" id="tab-2" name="tab-group-1"/>
<label for="tab-2">Tab Two</label>
</div>

关于html - 单选按钮组检查属性 css 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30479526/

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