How to format text in radio input tag?

I am building a survey form and it has a question with radio type input tag.

I want the font type of radio options ('Definitely', 'Maybe'..) similar to the font type of question i.e "Gill Sans 20px"

Here's my HTML -

<label id="recco">Would you recommend CherryMinds to a friend?</label><br>
<input type="radio" name="recco" value="1">Definitely<br>
<input type="radio" name="recco" value="2">Maybe<br>
<input type="radio" name="recco" value="3">Not Sure<br>

I applied this CSS -

#recco>input[type="radio"] {
  font-family: "Gill Sans";
  font-size: 20px;
  color: hotpink;
}

But it is not changing the font type of radio options. What is the correct way to style input tag options (type - radio & checkbox) ?

Solution 1:

You are not using <label> in the manner it should be used

Radio buttons are hard to style, and the text after them are not part of the radio

If you want to change the color of the circle/dot, here is a way How do I change the color of radio buttons?

Wrapping the label around the radio AND the text, makes the radio selectable by clicking the text. You can also use <label for="idOfOneRadio"... to have the same effect without the wrapping

Also I do not have Gill sans on my computer, so give me an alternative

You can have the class on each element or on the container

#banner {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/96/Boreal_Forest_Banner.JPG);
  width:100%;
  resize: both;
  overflow: hidden;
  background-size: cover;
  padding: 5px;
}

.recco {
  font-family: "Gill Sans", Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: hotpink;
}

<div id="banner">
  <h3 class="recco">Would you recommend CherryMinds to a friend?</h3>
  <label class="recco"><input type="radio" name="recco" value="1"> Definitely</label><br>
  <label class="recco"><input type="radio" name="recco" value="2"> Maybe</label><br>
  <label class="recco"><input type="radio" name="recco" value="3"> Not Sure</label><br>
</div>
<hr/>
<div id="banner" class="recco">
  <h3>Would you recommend CherryMinds to a friend?</h3>
  <label><input type="radio" name="recco" value="1"> Definitely</label><br>
  <label><input type="radio" name="recco" value="2"> Maybe</label><br>
  <label><input type="radio" name="recco" value="3"> Not Sure</label><br>
</div>