[英]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>
I have to change the font style with:我必须更改字体样式:
font-family:SegoeUI-SemiBold;
font-size:12px;color:#535353;text-align:left;
these are the things should be added.这些是应该添加的东西。
Why not just add the same styles to your <p>
tag:为什么不将相同的样式添加到您的
<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>
Works fine for me, when you use the font correctly as font-family: 'Segoe UI SemiBold';
对我来说效果很好,当您正确使用字体作为
font-family: 'Segoe UI SemiBold';
: :
Better Screenshot:更好的截图:
Update更新
The selected Radio should have a different colour.选定的 Radio 应该有不同的颜色。 You need to use a
<span>
for this case:对于这种情况,您需要使用
<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.