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;
}

What do you mean? When a radio button is selected, I only see green padding outside a black ring. Do you want to modify the color of that black ring? — Sergey A Kryukov
– Sergey A Kryukov, Commented Mar 1 at 12:43
Please see https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons. — Sergey A Kryukov
– Sergey A Kryukov, Commented Mar 1 at 12:43
The Color of the ring in question seems to depend on the accent-color used, and is likely browser/os dependant too. So you could adjust your accent color slightly (the value green shows a white border for me) but there is no guarantee that it will work for everyone. — NickSlash
– NickSlash, Commented Mar 1 at 13:39

NickSlash · Accepted Answer · 2025-03-01 14:04:34Z

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>

Lajos Arpad · Accepted Answer · 2025-03-01 13:42:35Z

Inspired from this codepen, we can make it fill your checkbox, albeit I'm using background-color for this purpose. Basically I'm hiding the radio button and adding content afterwards that is styled according to your needs. Since it's a label for the radio button, clicks on it trigger state changes for the radio button.

div {
  margin:0 0 0.75em 0;
}

input[type="radio"] {
    display:none;
}
input[type="radio"] + label {
    color: #292321;
    font-family:Arial, sans-serif;
    font-size:14px;
}
input[type="radio"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    cursor:pointer;
    -moz-border-radius:  50%;
    border-radius:  50%;
}

input[type="radio"] + label span {
     background-color:white;
     border: 1px solid black;
}

input[type="radio"]:checked + label span{
     background-color:#4eab47;
}

input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

<div>
  <input type="radio" id="radio01" name="radio" />
  <label for="radio01"><span></span></label>
</div>

<div>
 <input type="radio" id="radio02" name="radio" />
 <label for="radio02"><span></span></label>
</div>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related