如何格式化单选输入标签中的文本？

Question

我正在构建一个调查表，它有一个带有无线电类型输入标签的问题。

我想要单选选项的字体类型（“肯定”、“也许”......）类似于问题的字体类型，即“Gill Sans 20px”

这是我的 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>

我应用了这个 CSS -

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

但它不会改变单选选项的字体类型。 设置输入标签选项样式的正确方法是什么（类型 - 单选和复选框）？

Answer 1

您没有以应有的方式使用<label>

单选按钮很难设置样式，并且它们后面的文本不是单选按钮的一部分

如果你想改变圆/点的颜色，这里有一个方法 How do I change the color of radio buttons?

将标签包裹在收音机和文本周围，使收音机可以通过单击文本来选择。也可以用<label for="idOfOneRadio"...不用换行也能达到同样的效果

我的电脑上也没有 Gill sans，所以给我一个替代方案

你可以在每个元素或容器上都有类

#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>