0

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>
user16290515
  • 1
  • 1

2 Answers2

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • 1
    Perhaps it would be more optimal to define the `.cig-stat` in the CSS so that he doesn't have so many inline definitions. – Mihail Minkov Jun 22 '21 at 15:14
  • @MihailMinkov Yes of course, but since the OP posted HTML with all inline-styles I suspected they wouldn't want to or couldn't use seperate CSS – Johannes Jun 22 '21 at 15:24
  • I think OP was trying to solve the problem adding the inline style to the input, but since it's no longer applicable, because of the solution, perhaps it should be best to indicate that and why exactly his attempt doesn't work. – Mihail Minkov Jun 22 '21 at 15:28
  • I think the `for` attributes should be pointing to the input `id` values and not the name values. – Aaron Sarnat Jun 22 '21 at 17:39
0

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.

Aaron Sarnat
  • 1,207
  • 8
  • 16
  • Note that I didn't see a use for your `
    ` tags in your screenshot, so I omitted them from my answer in favor of `
    ` which adds group semantics to the radio group (though you could put the `
    ` tags back in if you wanted). I also removed the `
    ` tags in favor of `
    ` tags which further group the `` and `
     – Aaron Sarnat Jun 22 '21 at 15:17
  • The more semantic you can be, the better. This is good for both accessibility and SEO. – Aaron Sarnat Jun 22 '21 at 15:19