I added custom accent-color to to radio input, but now it has black padding. How do I remove or change that padding?

Question

I added a custom accent-color to radio input buttons, but it also added black padding around the custom color. Any ideas how to remove it?

Accent Color Image

.my-radio-btn {
    margin: 0px;
    height: 25px;
    width: 25px;
    margin-top: -9px;
    accent-color: #4eab47;
}

Answer 1

You can use the ::before and ::after pseudo elements on the label along with hiding the input element to create a custom button.

:root {
  --baseAccent: black;
  --baseBackground: white;
  --activeAccent: #4eab47;
  --activeBackground: white;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
  display: inline-flex;
  align-items: center;
}

label::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  margin-right: 8px;
  border-color: var(--baseAccent);
  background-color: var(--baseBackground);
}

input[type="radio"]:checked + label::before {
  background-color: var(--activeAccent);
  border-color: var(--activeAccent);
  box-shadow: inset 0 0 0 4px var(--activeBackground);
}

<input type="radio" id="radio1" name="group">
<label for="radio1">Radio 1</label>
<br>
<input type="radio" id="radio2" name="group">
<label for="radio2">Radio 2</label>