问题描述
我的 HTML 页面使用了黑色背景图像。我想将单选按钮标签/文本更改为白色（就像问题一样）我该怎么做？以下是我的代码片段。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>解决方法
您需要将这些 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>首先，我会像这样设置您的标记：
<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 规则即可。