How to modify the styles of the values of the radio buttons in CSS?

Question

I am completely new to programming and I am trying to make a simple survey page to start. I am only using CSS and HTML. I have made radio buttons but I am not sure how to 'select' them in CSS.

Below is my HTML code. I would like to style the questions that are in element <p> but I want to do them all differently. I know I can select p {'how I want font, etc.. styled here} and then style in CSS but I want them all slightly different colors. When I try .survey-question-1 p {'how I want font styled here'} nothing happens.

I really don't know what selectors to use to call the elements I want to change.

<div class='survey-name'>
        First name: <input type='text' id= 'firstname' name='FirstName'><br>
        Last name: <input type='text' name='LastName'><br>
        
   </div>

<div class='survey-question-1'>
    <p>Are you a Front-End or Back-End Developer?</p>
        <input type='radio' name='developer' value='Front-End'> Front-End<br>
        <input type='radio' name='developer' value='Back-End'> Back-End<br>

</div>

<div class='survey-question-2'>
    <p>How many years of experience do you have?</p>
    <input type='radio' name='years' value='less than 1'> less than 1<br>
    <input type='radio' name='years' value='1-2'> 1-2<br>
    <input type='radio' name='years' value='2-3'> 2-3<br>
    <input type='radio' name='years' value='3-4'> 3-4<br>
    <input type='radio' name='years' value='4-5'> 4-5<br>
    <input type='radio' name='years' vale='more than 5'> more than 5<br>
</div>

`.survey-question-1 p` would select a `p` element, I assume your radio buttons are `input`s? — DBS, Oct 30 '19 at 20:16
https://markheath.net/post/customize-radio-button-css check here.. you might get it useful. — rrrrrrrrr, Oct 30 '19 at 20:20
I tried the .survey-question-1 p but still not showing up when I run. I also tried adding a class to each p element but when i select the class in CSS and modify the font family or font size nothing changes — ccait, Oct 30 '19 at 20:21
input[type=text] { width: 50%; margin: 5px 0px; display: inline-block; } .survey-question-1 p { color: lightblue; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 20px; — ccait, Oct 30 '19 at 21:33

EGC · Answer 1 · 2019-10-30T22:26:16.533

Bear in mind, this is a hideous design, but it will show you how to change the color/styling of every single component on your page.

Let me know if there is specific styling you were after or if something is unclear.

/* Style Survey Name section */
.survey-name {
  color: green;
}

.survey-name input {
  border: 1px solid green;
}

/* Style Survey Q1 section */
.survey-question-1,
.survey-question-1 p {
  color: red;
}

.survey-question-1 input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  border: 2px solid gray;
}

.survey-question-1 input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: red;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid gray;
}

/* Style Survey Q2 section */
.survey-question-2,
.survey-question-2 p {
  color: blue;
}

.survey-question-2 input[type='radio']:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: white;
  content: '';
  display: inline-block;
  border: 2px solid gray;
}

.survey-question-2 input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: blue;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid gray;
}

<div class='survey-name'>
  First name: <input type='text' id='firstname' name='FirstName' /><br />
  Last name: <input type='text' name='LastName' /><br />

</div>

<div class='survey-question-1'>
  <p>Are you a Front-End or Back-End Developer?</p>
  <input type='radio' name='developer' value='Front-End' /> Front-End<br>
  <input type='radio' name='developer' value='Back-End' /> Back-End<br>

</div>

<div class='survey-question-2'>
  <p>How many years of experience do you have?</p>
  <input type='radio' name='years' value='less than 1' /> less than 1<br>
  <input type='radio' name='years' value='1-2' /> 1-2<br>
  <input type='radio' name='years' value='2-3' /> 2-3<br>
  <input type='radio' name='years' value='3-4' /> 3-4<br>
  <input type='radio' name='years' value='4-5' /> 4-5<br>
  <input type='radio' name='years' vale='more than 5'> more than 5<br>
</div>

See also JSFiddle

Resources I used:

Radio Button Styling

:After CSS

In HTML `` is a self closing element. It does not require the trailing slash. `` and `` are equally valid (just like `
` and `
`). It only depends on the taste of the author which one is better. Note that in XHTML both `` and `
` are invalid. But XHTML is an old (and arguably obsolete) standard. Anyone that is learning web development in 2019 should just learn HTML5 and not bother with XHTML. Also note that even the link you gave uses an unclosed `` in their example. — Rúnar Berg, Oct 30 '19 at 22:12

score 0 · Answer 2 · answered Oct 30 '19 at 21:41

A good practice is to label your radio buttons. (See MDN page for labels). So I assume you will change your markup accordingly.

Secondly you probably want to use the attribute selector to target the radio buttons. You can also use the :checked pseudo selector for styling the checked radio button.

And thirdly, to style radio buttons you might need to apply appearance: none.

.survey-question-1 input[type="radio"] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: pink;
  border: 0.5ex solid pink;
  border-radius: 100%;
  width: 1em;
  height: 1em;
}

.survey-question-1 input[type="radio"]:checked {
  background: rebeccapurple;
}

<form>
  <fieldset class='survey-question-1'>
    <legend>
      Are you a Front-End or Back-End Developer?
    </legend>

    <label>
      <input type='radio' name='developer' value='Front-End'>
      Front-End
    </label>
    
    <label>
      <input type='radio' name='developer' value='Back-End'>
      Back-End
    </label>
  </fieldset>
</form>

How to modify the styles of the values of the radio buttons in CSS?

2 Answers2