0

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

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) ?

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Faiz Khan
  • 3
  • 2

1 Answers1

3

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>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • Thank you. I now understand the correct use of – Faiz Khan Jan 17 '22 at 13:15
  • IDs must be unique. I would use an ID on a container and use classes for the content. It a form I might use ID on the form tag and possibly a total field and classes on the rest to do relative navigation – mplungjan Jan 17 '22 at 13:42
  • 1
    Thank you, good sir. I fall in love with the tech community everyday because of samaritans like yourself. – Faiz Khan Jan 18 '22 at 05:54
  • @FaizKhan Please see my update. I added a one where the class is on the container. Difference is the `h3` would need to be sized: `.recco h3 {font-size: 20px;}` – mplungjan Jan 18 '22 at 07:11