html - Bootstrap 4 单选框和复选框样式

Question

I have a problem with Bootstrap 4 radio and checkboxes custom styles.

I want to recreate: 

我设法更改了背景，但按下单选框或复选框时无法更改样式。我对可以粘贴的数据 SVG 没有经验，我在一些论坛上看到你也可以这样做。

另外，我尝试将自己的图像作为 SVG 文件添加到我的 css background-image: url() 但无法识别。

HTML 和 CSS 的波纹管代码

.custom-control-label::before {
  background-color: #f1f2ec;
  border: 2px solid #678000;
  height: 21px;
  width: 21px;
  border-radius: 22px;
  box-sizing: border-box;
}


/* 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: #678000; */
  /* border: 2px solid #678000; */
  /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
  background-image: url("/images/radio-pressed.svg");
  border-radius: 50%;
}

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

<!-- Radio -->
<div class="col-6 pt-5">
  <form>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="radioBtn2">
      <label for="radioBtn2" class="custom-control-label"></label>
    </div>
  </form>
</div>



<!-- Checkbox -->
<div class="col-6 pt-5 pb-5">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>
</div>

我也在网上看到了一些演示，但它们并没有真正帮助我。任何帮助，将不胜感激！

标签： htmlcssbootstrap-4

Answer 1

您需要覆盖控制检查和不确定状态的 bootstrap.css。有很多方法可以做到这一点。例如，

.custom-control-label::before {
  background-color: #f1f2ec;
  border: 2px solid #678000;
  height: 21px;
  width: 21px;
  border-radius: 22px;
  box-sizing: border-box;
}

.custom-control-input:checked ~ .custom-control-label::before {
  color: #678000;
  border-color: #678000;
  background-color: #f1f2ec;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  content: "⬤";
  left: -20.5px;
  top: 1.5px;
  color: #678000;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  content: "";
  color: #678000;
  position: absolute;
  border: 1px #fff solid;
  border-radius: 3px;
  background-color: #678000;
  background-image: none;
  top: 7px;
  left: -21.5px;
  height: 15px;
  width: 16px;
}

.custom-checkbox .custom-control-input[indeterminate] ~ .custom-control-label::after {
  color: #678000;
  background-image: none;
  background-color: #678000;
  position: absolute;
  height: 2px;
  width: 14px;
  top: 13px;
  left: -20.5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- Radio -->
<div class="col-6 pt-5">
  <form>
    <div class="custom-control custom-radio">
      <input type="radio" class="custom-control-input" id="radioBtn2">
      <label for="radioBtn2" class="custom-control-label"></label>
    </div>
  </form>
</div>



<!-- Checkbox -->
<div class="col-6 pt-5 pb-5">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
  </div>
</div>

codeply 演示