具有百分比宽度的容器中的单选按钮伪元素定位问题

Question

我使用百分比宽度容器设置了以下单选按钮：

当然，中间的圆圈必须居中。

我发现伪元素定位非常棘手。

根据浏览器的宽度，圆圈并不总是水平居中。这是一个单选按钮的gif，同时调整窗口大小：

是否可以在保持百分比宽度容器时保持此圆心？

这是我的代码：

HTML：

<div class="form-section gender">
  <div class="label-col">
    <label>Gender</label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="male" value="male" />
    <label for="male"><span>Male</span></label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="female" value="female" />
    <label for="female"><span>Female</span></label>
  </div>
</div>

CSS（从SCSS编译）：

@charset "UTF-8";
.gender {
  width: 80%;
  margin: 0 auto;
}
.gender .form-section {
  margin-top: 20px;
  display: inline-block;
  width: 70px;
}
.gender input[type=radio] {
  display: none;
  width: 30px;
}
.gender .form-section label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  color: gray;
}
@keyframes fade-in {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.gender .form-section label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: transparent;
  border: 2px solid gray;
  border-radius: 50%;
}
.gender input[type=radio]:checked + label:before {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  content: "•";
  color: blue;
  font-size: 21px;
  text-align: center;
  line-height: 17px;
  border: 2px solid blue;
  animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
  color: blue;
}

Codepen链接：http://codepen.io/anon/pen/JXxvZW

Answer 1

我使用translate定位内部点以使标签居中并更改标签样式以添加外边框

.gender {
  width: 80%;
  margin: 0 auto;
}
.gender .form-section {
  margin-top: 20px;
  display: inline-block;
  width: 70px;
}
.gender input[type=radio] {
  display: none;
  width: 30px;
}
.gender .form-section label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 16px;
  color: gray;
  border: 2px solid grey;
  border-radius: 50%;
  height: 16px;
}
.gender .form-section label span {
  margin-left: 25px;
}
@keyframes fade-in {
  from {
    opacity: 0.7
  }
  to {
    opacity: 1
  }
}
.gender .form-section label:before {
  content: "";
}
.gender input[type=radio]:checked + label:before {
  width: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 8px;
  background: blue;
  position: absolute;
  border-radius: 50%;
  animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
  border-color: blue;
}

<div class="form-section gender">
  <div class="label-col">
    <label>Gender</label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="male" value="male" />
    <label for="male"><span>Male</span>
    </label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="female" value="female" />
    <label for="female"><span>Female</span>
    </label>
  </div>
</div>

Answer 2

我已经使用::after和::before来构建它。请仔细检查，看看是否有效。

＆＃13;

＆＃13;

input[type="radio"] {display: none;}
input[type="radio"] + label {
  display: inline-block;
  padding-left: 25px;
  line-height: 25px;;
  position: relative;
}
input[type="radio"] + label::after {
  content: " ";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  left: 0;
  top: 4px;
  border-radius: 100%;
}

input[type="radio"]:checked + label::before {
  content: " ";
  display: block;
  position: absolute;
  width: 8px;
  height: 8px;
  border: 2px solid #999;
  left: 4px;
  background-color: #999;
  top: 8px;
  border-radius: 100%;
}

＆＃13;

<div class="form-section gender">
  <div class="label-col">
    <label>Gender</label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="male" value="male" />
    <label for="male"><span>Male</span></label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="female" value="female" />
    <label for="female"><span>Female</span></label>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

预览

JSBin：http://jsbin.com/bapepahequ