Tips for modifying the text color of radio button choices in HTML and CSS

Question

Tips for modifying the text color of radio button choices in HTML and CSS

I have set a black background image for my HTML page. How can I change the radio button labels/texts to white, similar to the questions? This is the code snippet that shows how it currently looks on the page: View Image

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

html css forms styling text-styling

Answer 1

Answer №1

Make sure to enclose the input elements within label tags, which should also include the text for each radio button, and then style them accordingly.

By the way, it is always recommended to use an external stylesheet for styling rather than inline styles. This not only helps in keeping the code clean but also avoids unnecessary repetition of the same styles across different elements.

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

Make sure to enclose the input elements within label tags, which should also include the text for each radio button, and then style them accordingly.

By the way, it is always recommended to use an external stylesheet for styling rather than inline styles. This not only helps in keeping the code clean but also avoids unnecessary repetition of the same styles across different elements.

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 3

Answer №2

To begin, I recommend structuring your code in the following way:

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

After setting up the structure, you can customize the appearance of the <legend> and <label> elements by changing the text color to white. It's advisable to separate the CSS styling from the HTML markup for better organization, but if needed, you can include them inline.

For a demonstration, check out this live example:

https://jsfiddle.net/1k3gte76/

If you prefer not to have a white border around the <fieldset> element, simply add a rule like border: none to remove it.

Answer 4

To begin, I recommend structuring your code in the following way:

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

After setting up the structure, you can customize the appearance of the <legend> and <label> elements by changing the text color to white. It's advisable to separate the CSS styling from the HTML markup for better organization, but if needed, you can include them inline.

For a demonstration, check out this live example:

https://jsfiddle.net/1k3gte76/

If you prefer not to have a white border around the <fieldset> element, simply add a rule like border: none to remove it.

Tips for modifying the text color of radio button choices in HTML and CSS

Answer №1

Answer №2

Similar questions

Navigate through JSON data to add to an HTML table

Inserting Multiple Inputs

What is the best way to extract value from an input text that is being repeated using ng-repeat within a Tr

The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Prevent users from copying and pasting text or right-clicking on the website

What is the best way to dynamically update the selected option in a dropdown menu within a Rails application using a variable?

Having trouble getting the Click Element with CSS selector to function properly in Google Tag Manager?

"Trouble with the external CSS file - it's not

Animate the smooth transition of a CSS element when it is displayed as a block using JQuery for a

Tips for removing the error hint when focusing on input fields in VueJS

I can't seem to figure out why I constantly struggle with adding a check mark to a checkbox using

I'm struggling to find a way to turn off the scroll bar

The CSS for the UI Grid is malfunctioning

What is the method to retrieve the selected value from a drop-down menu that is connected to JSON keys?

PHP overall outcome

Exploring how to display JSON objects containing spaces in an HTML table

Content not aligned in the center of the page on Internet Explorer

Guide to finding the parent component of a particular element?

Navigating between divs with a 100% height using up and down movements

Is there a problem with css3 opacity transition in Webkit browsers?