Having trouble customizing radio and checkbox styles in Bootstrap 4?
I'm trying to achieve something like this:
https://i.sstatic.net/Wp6SR.jpg
I've successfully changed the background, but I'm struggling to change the style when the radio or checkbox is selected. I'm not familiar with using SVG data that can be pasted, although I've read about it on some forums.
Additionally, I attempted to use my own image as an SVG file for the css background-image: url(), but it wasn't recognized.
Below is the HTML and CSS code snippet:
.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; */
/* Replace this bg image SVG 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've looked at some online demos, but they haven't provided much help. Any assistance you can offer would be greatly appreciated!