Bootstrap4 单选按钮背景和填充颜色 [英] Bootstrap4 radio button background and fill color

查看：25
本文介绍了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>

I was wondering how can I change Bootstraps radio button background color and fill color?

<div class="form-check">
  <input class="form-check-input" type="radio" name="radio" id="radio1" value="option1">
  <label class="form-check-label" for="radio1"> radio label
  </label>
</div>

解决方案

Use the custom-radio class like so: 

<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">Toggle this custom radio</label>
</div>

That gives you the flexibility to style the radio input in any way you want.

The background color (i.e. what you see in the default, unchecked state) is controlled by this rule: 

.custom-control-label::before {
    background-color: darkorange;
}

I changed it from the default grey to orange there.

And here are the css rules to control all states: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
/* This is the default state */
.custom-radio .custom-control-label::before {
    background-color: darkorange;  /* orange */
}

/* This is the checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-color: greenyellow;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E); 
    border-radius: 50%;
}

/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active ~ .custom-control-label::before {
    color: #fff;
    background-color: #ff0000; /* red */
}
    
/* the shadow; displayed while the element is in focus */
.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); /* pink, 25% opacity */
}
</style>

<div class="container">
    <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">Toggle this custom radio</label>
            </div>
        </div>
    </div>
</div>

这篇关于Bootstrap4 单选按钮背景和填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆