如何解决垂直对齐单选按钮内的点内容 \00B7不起作用
您好,我正在尝试在表单中创建一个单选按钮,当我选择该选项时,内部内容没有出现在中间,它略微关闭。
我想要的是 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。