我正在尝试突出显示 bootstrap 3 按钮组中的第一个单选按钮,以使用 CSS 显示与其他单选按钮不同的背景颜色。我可以使用事件中的 Jquery 来执行此操作,但如果能使它正常工作就更好了。所以我在 bootply 上尝试了这个但没有运气......
.btn-group input[type="radio"]:first-child:checked + label {
background-color:#CAFF70 !important;
}
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-sm btn-default">
<input type="radio" id="ok_1" name="options_1" value="ok"> <span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-sm btn-default">
<input type="radio" id="na_1" name="options_1" value="na"><span class="glyphicon glyphicon-eye-close"></span>
</label>
<label class="btn btn-sm btn-default">
<input type="radio" id="no_1" name="options_1" value="repair"> <span class="glyphicon glyphicon-pencil"></span>
</label>
</div>
最佳答案
问题是在您的代码中输入的是标签的子项,这是错误的。输入和标签必须在同一层。
<div class="btn-group">
<input type="radio" id="ok_1" name="options_1" value="ok">
<label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label>
<input type="radio" id="ok_2" name="options_1" value="ok">
<label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label>
<input type="radio" id="ok_3" name="options_1" value="ok">
<label class="btn btn-sm btn-default"><span class="glyphicon glyphicon-ok"></span></label>
</div>
此外,如果您想设置单选按钮的样式(如您展示的按钮),您可以阅读此 tutorial .
关于css - bootstrap 3 按钮组突出显示第 n 个 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33166883/