☰

Bootstrap4 ラジオボタンの背景と塗りつぶしの色 質問する

tag-icon • tag-icon bootstrap-4
Bootstrap4 ラジオボタンの背景と塗りつぶしの色 質問する

Bootstrap のラジオ ボタンの背景色と塗りつぶし色を変更するにはどうすればよいでしょうか?

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

ベストアンサー1

クラスは次のように使用します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>

これにより、ラジオ入力を好きなように柔軟にスタイル設定できるようになります。

背景色 (つまり、デフォルトのチェックされていない状態で表示される色) は、次のルールによって制御されます。

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

そこでデフォルトのグレーからオレンジに変更しました。

すべての状態を制御する CSS ルールは次のとおりです。

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

おすすめ記事