Bootstrap 4 radio and checkbox styling

Question

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

I want to recreate:

I managed to change the background but I cannot change the style when the radio or checkbox is pressed. I have no experience with data SVG that can be pasted, I saw in some forums that you can do that also.

Also, I have tried to add my own image as an SVG file to my css background-image: url() but is not recognized.

Bellow code for HTML and 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>

I saw also some demos online but they don't really help me. Any help would be appreciated!

[click here](https://stackoverflow.com/questions/44279398/customize-bootstrap-checkboxes) this is what you want?? — Ammad Amir, Mar 24 '21 at 12:43

Apexxs · Accepted Answer · 2021-03-24T14:20:21.063

You'll need to override the bootstrap.css that controls the checked and indeterminate states. There are many ways you can do this. For example,

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

Thank you kindly. I have added you're answer and tweaked the left top px to fit in my project and it works. I had no ideea that you can add content: "⬤"; :) I was trying to add my svg image :) . Thank you once again! — Petran Laurentiu, Mar 24 '21 at 19:50

Bootstrap 4 radio and checkbox styling

1 Answers1