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

问题描述

我想知道如何更改Bootstraps单选按钮的背景色和填充色?

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>

推荐答案

使用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">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.

这是控制所有状态的css规则:

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屋！