html - 自定义单选图标对齐问题，看起来像椭圆形

Question

我正在使用 div 制作自定义单选按钮。但我有对齐问题。单选按钮看起来像椭圆形而不是圆形。

这是我的 html 代码。

<div class="customRadioBtn">
  <div class="radio_wrap selected">
    <span class="radioDot"></span>
  </div>
 </div>

这是CSS

.customRadioBtn {
    display: block;
    position: relative;
    margin-right: 10px;
}

.customRadioBtn .radio_wrap {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 2px 4px 0 #d4d4d4;
}

.customRadioBtn .radio_wrap .radioDot {
    position: absolute;
    display: inline;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 10px;
    height: 10px;
    background: #5f4ebf;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    border-radius: 50%;
}

这是它的样子

这是 fiddle 的链接 - https://jsfiddle.net/z8muoseb/1/

如有任何帮助，我们将不胜感激。谢谢

Answer 1

可能是高宽问题

.customRadioBtn .radio_wrap {
    width: 16px;
    height: 16px;
}