本文介绍了Bootstrap4 单选按钮背景和填充颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道如何更改 Bootstraps 单选按钮的背景颜色和填充颜色?
<input class="form-check-input" type="radio" name="radio" id="radio1" value="option1"><label class="form-check-label" for="radio1">无线电标签
解决方案
像这样使用 custom-radio
类:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><div class="custom-control custom-radio"><input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"><label class="custom-control-label" for="customRadio1">切换这个自定义收音机</label>
这让您可以灵活地以任何您想要的方式设置收音机输入的样式.
背景颜色(即您在默认、未选中状态下看到的颜色)由以下规则控制:
.custom-control-label::before {背景颜色:深橙色;}
我在那里将其从默认的灰色更改为橙色.
这里是控制所有状态的 css 规则:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><风格>/* 这是默认状态 */.custom-radio .custom-control-label::before {背景颜色:深橙色;/* 橘子 */}/* 这是检查状态 */.custom-radio .custom-control-input:checked~.custom-control-label::before,.custom-radio .custom-control-input:checked~.custom-control-label::after {背景颜色:绿黄色;/* 绿色 *//* 这个 bg 图像 SVG 只是一个白色圆圈,你可以用任何有效的 SVG 代码替换它 */背景图像:url(数据:图像/svg+xml;字符集=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E);边界半径:50%;}/* 活动状态,即在按下鼠标时显示 */.custom-radio .custom-control-input:active ~ .custom-control-label::before {颜色:#fff;背景颜色:#ff0000;/* 红色的 */}/* 影子;当元素处于焦点时显示 */.custom-radio .custom-control-input:focus ~ .custom-control-label::before {box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25);/* 粉红色,25% 不透明度 */}</风格><div class="容器"><div class="row mt-3"><div class="col"><div class="custom-control custom-radio"><input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"><label class="custom-control-label" for="customRadio1">切换这个自定义收音机</label>