垂直对齐单选按钮内的点内容 \00B7不起作用

问题描述

您好，我正在尝试在表单中创建一个单选按钮，当我选择该选项时，内部内容没有出现在中间，它略微关闭。

Currently it look like this

我想要的是 Something like this

     
     input[type=radio] {
      display: none;
    }
    
    input[type=radio] + label:before {
      position: relative;
      content: "\26AA";
      border: 0.1em solid #000;
      border-radius: 50%;
      display: inline-block;
      width: 1em;
      height: 1em;
      padding: 0.2em;
      margin-right: 0.4em;
      vertical-align: center; 
      color: transparent;
      transition: .2s;
      line-height: 1.2rem;
    }
    
    input[type=radio] + label:active:before {
      transform: scale(0);
    }
    
    input[type=radio]:checked + label:before {
      background-color: #662D91;
      border-color: #662D91;
      color: #fff;
    }
    
    input[type=radio]:disabled + label:before {
      transform: scale(1);
      border-color: #aaa;
    }
    
    input[type=radio]:checked:disabled + label:before {
      transform: scale(1);
      background-color: #bfb;
      border-color: #bfb;
    }

    <span class="oneChoice">
      <input type="radio" value="tfa_79" class="" id="tfa_79" name="tfa_78">
      <label class="label postField" id="tfa_79-L" for="tfa_79">
      <span class="input-radio-faux"></span>Patient</label>
    </span> 
    <span class="oneChoice">
      <input type="radio" value="tfa_78" class="check" id="tfa_79" name="tfa_78">
      <label class="label postField" id="tfa_78-L" for="tfa_79">
      <span class="input-radio-faux"></span>Patient</label>
    </span> 

解决方法

input[type=radio] {
      display: none;
    }
    
    input[type=radio] + label:before {
      position: relative;
      content: "\26AA";
      border: 1px solid #000;
      border-radius: 50%;
      display: inline-block;
      width: 17px;
      height: 17px;
      padding-top:1px;
      padding-right:5px;
      padding-bottom:2px;
      color: transparent;
      transition: .2s;
      line-height: 1.2rem;      
    }
    
    input[type=radio] + label:active:before {
      transform: scale(0);
    }
    
    input[type=radio]:checked + label:before {
      background-color: #662D91;
      border-color: #662D91;
      color: #fff;
    }
    
    input[type=radio]:disabled + label:before {
      transform: scale(1);
      border-color: #aaa;
    }
    
    input[type=radio]:checked:disabled + label:before {
      transform: scale(1);
      background-color: #bfb;
      border-color: #bfb;
    }

<span class="oneChoice">
      <input type="radio" value="tfa_79" class="" id="tfa_79" name="tfa_79">
      <label class="label postField" id="tfa_79-L" for="tfa_79">
      <span class="input-radio-faux"></span>Patient</label>
    </span> 
    <span class="oneChoice">
      <input type="radio" value="tfa_78" class="" id="tfa_78" name="tfa_78">
      <label class="label postField" id="tfa_78-L" for="tfa_78">
      <span class="input-radio-faux"></span>Patient</label>
    </span>