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

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

这是它的外观

这里是小提琴的链接-https://jsfiddle.net/z8muoseb/1/

任何帮助将不胜感激。谢谢

Answer 1

可能是高度和宽度问题