How to change the text color of radio button options in HTML / CSS?

Question

I have used a black colour background image for my HTML page. I want to change the radio button labels/ texts to white ( just like the questions) How do I do that? Following is my code snippet. 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

You need to wrap those input elements in label tags (which also contain the texts for those respective radio buttons) and apply the styling to those.

BTW: In general it's better to have an external stylesheet for that purpose instead of using inline styles - among other things you avoid havin to repeat the same styles over and over when you simply can apply them to a particular HTML tag or a class.

 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

First, I'd set up your markup like this:

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

Then you can style the <legend> and <label> elements to color: white . I'd split the CSS up from the markup if possible. If not, you can keep them inline.

Here's a fiddle of the above in action:

https://jsfiddle.net/1k3gte76/

If you don't like the white border around the <fieldset> element then just add a border: none rule to that element.