如何更改單選按鈕中的字體樣式？

Question

 .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;

這些是應該添加的東西。

Answer 1

為什么不將相同的樣式添加到您的<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>