Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I am stuck on step 15.
Use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

The original font color is black and I am trying to update to blue.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<form>

<label for="name">Full-Name:</label><br>
<input type="text" id="name"><br>

<label for="email">Email:</label><br>
<input type="email" id="email"><br>

<label for="position">Position:</label><br>
<select id="position">
    <option>Choose Here</option>
    <option>Choose Here</option>
    <option>Choose Here</option>
    <option>Choose Here</option>
    </select>

<fieldset class="radio-group">
<legend>Avail</legend>

<input type="radio" name="availability"><label for="position">Full-Time</label>

<input type="radio" name="availability"><label for="position">Part-Time</label>

</fieldset>
<label for="message">Why?</label><br>
<textarea id="message"></textarea>
<br>
<button type="submit" value="submit">Submit</button>

</form>
    </div>
</body>
</html>

/* file: styles.css */
body {
  background-color: rosybrown;
}
form {
  border: 3px solid red;
  padding: 10px 10px;
  border-radius: 20px;
}
label {
  font-weight: bold;
}
input:focus, textarea:focus {
  border-color: brown;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
button:hover {
  background-color: orange;
  font-size: 30px;
}
.radio-group input[type="radio"]:checked {
  border-color: red;
  background-color: orangered;
  box-shadow: 5px 5px 5px 5px;
}
.radio-group input[type="radio"]:checked + label {
  color: blue;
}
input:first-of-type {
  border-radius: 20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Your radio buttons are not properly associated with their labels.

3

I changed the name attribute to ID and changed the for to availability and it still did not work

4

Please review this example at W3 Schools on how to use radio buttons.

Here’s another example from MDN.

Basically, to group several radio buttons, they all need to have the same name attribute. Then each radio button needs a unique id attribute. That unique id attribute is used in the label’s for attribute to associate the radio button with the label.

1 Like