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

Question

我的 HTML 页面使用了黑色背景图像。 我想将单选按钮标签/文本更改为白色（就像问题一样）我该怎么做？ 以下是我的代码片段。 这是它在页面上的外观。

 <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规则。