Search code examples
htmlcssflexboxpseudo-element

Custom radio button cannot center pseudo element

I am trying to create custom radio button, but after trying few centering methods I couldn't centre pseudo element. For some screen sizes, it works fine but sometimes it gets weird.

enter image description here

.custom-radio {
  display: none;
}

.custom-radio+label {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.custom-radio+label:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: black;
  border-radius: 50%;
}

.custom-radio.flex+label {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio'>
  <label for="custom-radio"></label>
</div>

<div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio flex'>
  <label for="custom-radio"></label>
</div>

Solution

  • Actually the issue is your label width and height...its 15px which is odd which preventing to calculate the top:50% and left:50% value from the parent...Try to do it 16px, it will work fine..

    .custom-radio {
  display: none;
}

.custom-radio+label {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}

.custom-radio+label:after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  border-radius: 50%;
}
    <div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio'>
  <label for="custom-radio"></label>
</div>

<div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio'>
  <label for="custom-radio"></label>
</div>

    Well if you don't want to change the width and height of label use Flexbox display:flex in label and margin:auto in :after to align it center vertically and horizontally...

    .custom-radio {
  display: none;
}

.custom-radio+label {
  position: relative;
  width: 15px;
  height: 15px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
}

.custom-radio+label:after {
  content: "";
  width: 11px;
  height: 11px;
  background: black;
  border-radius: 50%;
  margin: auto;
}
    <div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio'>
  <label for="custom-radio"></label>
</div>

<div class="input-wrapper">
  <input type="radio" id='custom-radio' class='custom-radio'>
  <label for="custom-radio"></label>
</div>