For today's practice, I used the switch check box made by Bootstrap4. The default color of the check box is blue, which does not match the color of the entire web page, so it needs to be changed to green.
I wanted to find a ready-made answer from the Internet, and I found a few, but it didn't work after I tried it, so I had to do it myself. After several attempts, it worked. The version I use is Bootstrap4, and it turns out that the implementation of Bootstrap5 and Bootstrap4 is not the same, and the final test is OK.
1. Checkboxes in Bootstrap5
It is very easy to change the color of the check box in Bootstrap5. You only need to directly modify the background color and border color of .form-check-input when it is selected: checked.
.form-check-input:checked {
background-color: #28a745;
border-color:#28a745;
}
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstra5中复选框的颜色</title>
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style> -->
.form-check-input:checked {
background-color: #28a745;
border-color:#28a745;
}
</style>
</head>
<body>
<div class="container mt-3">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="option1" name="sports" value="something" checked>
<label class="form-check-label" for="check1">羽毛球</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="option2" name="sports" value="something">
<label class="form-check-label" for="check2">乒乓球</label>
</div>
</div>
<!-- 开关样式的复选框 form-switch -->
<div class="container mt-3 form-check form-switch">
<input class="form-check-input" type="checkbox" id="mySwitch" value="yes" checked>
<label class="form-check-label" for="mySwitch">已启用</label>
</div>
</body>
</html>
Two, the check box in Bootstrap4
The modification of the checkbox color in Bootstrap4 is a little more complicated. You need to use the ~ brother selector and ::before, and the class names used are also different. Originally, the code I referred to was: active, which was invalid after the test. I changed it to: checked with the attitude of giving it a try, and the target effect was achieved. Just copy the code below and change the color value. code show as below:
.custom-control-input:checked~.custom-control-label::before{
background-color: #28a745;
border-color: #28a745;
}
The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap4中复选框的颜色</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- 以下css样式更改复选框的背景色 为绿色-->
<style>
.custom-control-input:checked~.custom-control-label::before{
background-color: #28a745;
border-color: #28a745;
}
</style>
</head>
<body>
<div class="container">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customSwitch1" checked>
<label class="custom-control-label" for="customSwitch1">网球</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
<label class="custom-control-label" for="customSwitch2">已启用</label>
</div>
</div>
</body>
</html>