How to change the font style in Radio Button?

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>

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.

Answer 1

Why not just add the same styles to your <p> tag:

 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'; :

Better Screenshot:

Update

The selected Radio should have a different colour. You need to use a <span> for this case:

 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>