如何更改 HTML / CSS 中单选按钮选项的文本颜色？

Question

我为我的 HTML 页面使用了黑色背景图像。我想将单选按钮标签/文本更改为白色（就像问题一样）我该怎么做？以下是我的代码 sn-p.This is how it is looking on the page.

<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<input type="radio" name="cig-stat" style="color:white" value="0" id="never-smoke" required>Never Smoked Cigarettes<br>
<input type="radio" name="cig-stat" style="color:white" value="1" id="curr-smoker">Current Cigarette Smoker<br>
<input type="radio" name="cig-stat" style="color:white" value="2" id="former-smoker">Former Cigarette Smoker<br>
<hr>

Answer 1

您需要将这些 input 元素包装在 label 标签中（其中还包含相应单选按钮的文本）并将样式应用于这些标签。

顺便说一句：一般来说，为此目的最好有一个外部样式表，而不是使用内联样式 - 除其他事项外，当您只需将它们应用于特定的 HTML 标记或类。

body {
  background: #555;
}

<hr>
<label for="" style="color:white">Cigarette smoking status</label><br><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="0" id="never-smoke" required>Never Smoked Cigarettes</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="1" id="curr-smoker">Current Cigarette Smoker</label><br>
<label for="cig-stat" style="color:white"><input type="radio" name="cig-stat" value="2" id="former-smoker">Former Cigarette Smoker</label><br>
<hr>

Answer 2

首先，我会这样设置您的标记：

<fieldset>
  <legend>Cigarette smoking status</legend>

  <div>
    <input type="radio" name="cig-stat" value="0" id="never-smoke" required />
    <label for="never-smoke">Never Smoked Cigarettes</label>
  </div>
  
  <div>
    <input type="radio" name="cig-stat" value="1" id="curr-smoker" />
    <label for="curr-smoker">Current Cigarette Smoker</label>
  </div>

  <div>
    <input type="radio" name="cig-stat" value="2" id="former-smoker" />
    <label for="former-smoker">Former Cigarette Smoker</label>
  </div>
</fieldset>

然后您可以将<legend> 和<label> 元素设置为color: white。如果可能的话，我会将 CSS 从标记中分离出来。如果没有，您可以将它们保持内联。

以下是上述操作的一个小技巧：

https://jsfiddle.net/1k3gte76/

如果您不喜欢 <fieldset> 元素周围的白色边框，则只需向该元素添加 border: none 规则即可。