[英]How to change the font style in Radio Button?
.rad > input { visibility: hidden; position: absolute; } .rad > i { display: inline-block; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 0.5px solid gray; } .rad > input:checked + i { box-shadow: inset 0 0 0 3px #fff; background: #ffc000; }
<p> <label class="rad"> <input type="radio" name="r1" value="a" checked="checked" /> <i></i> Male </label> <label class="rad"> <input type="radio" name="r1" value="b" /> <i></i> Female </label> </p>
我必须更改字体样式:
font-family:SegoeUI-SemiBold;
font-size:12px;color:#535353;text-align:left;
这些是应该添加的东西。
为什么不将相同的样式添加到您的<p>
标签中:
p { font-family: 'Segoe UI SemiBold'; font-size: 12px; color: #535353; text-align: left; } .rad > input { visibility: hidden; position: absolute; } .rad > i { display: inline-block; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 0.5px solid gray; } .rad > input:checked + i { box-shadow: inset 0 0 0 3px #fff; background: #ffc000; }
<p> <label class="rad"> <input type="radio" name="r1" value="a" checked="checked" /> <i></i> Male </label> <label class="rad"> <input type="radio" name="r1" value="b" /> <i></i> Female </label> </p>
对我来说效果很好,当您正确使用字体作为font-family: 'Segoe UI SemiBold';
:
更好的截图:
更新
选定的 Radio 应该有不同的颜色。 对于这种情况,您需要使用<span>
:
p { font-family: 'Segoe UI SemiBold'; font-size: 12px; color: #535353; text-align: left; } .rad > input { visibility: hidden; position: absolute; } .rad > i { display: inline-block; vertical-align: middle; width: 20px; height: 20px; border-radius: 50%; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 0.5px solid gray; } .rad > input:checked + i { box-shadow: inset 0 0 0 3px #fff; background: #ffc000; } .rad > input:checked ~ span { color: #979797; }
<p> <label class="rad"> <input type="radio" name="r1" value="a" checked="checked" /> <i></i> <span>Male</span> </label> <label class="rad"> <input type="radio" name="r1" value="b" /> <i></i> <span>Female</span> </label> </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.