Build a Job Application Form - Build a Job Application Form

Tell us what’s happening:

. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

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>
      <input type="text" id="name" name="name" placeholder="Enter your name" required />
      <br><br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="Enter your email" required />
      <br><br>

      <label for="position">Position:</label>
      <select id="position" name="position">
        <option value="front end developer">Front End Developer</option>
        <option value="backend developer">Back End Developer</option>
        <option value="tester">Tester</option>
      </select>
      <br><br>

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

        <label>
          <input type="radio" name="availability" value="full-time" required />
          Full-Time
        </label>

        <label>
          <input type="radio" name="availability" value="part-time" />
          Part-Time
        </label>
      </fieldset>
      <br>

      <label for="message">Why do you want this job?</label><br>
      <textarea id="message" name="message" placeholder="Write your reason here..." rows="4" cols="50"></textarea>
      <br><br>

      <button type="submit">Submit</button>
    </form>
  </div>
</body>
</html>

/* file: styles.css */
  body {
    font-family: Arial, sans-serif;
    margin: 10px;
    padding: 10px;
      background-color: white;}
  
  
  input:focus,
    textarea:focus {
      border: 2px solid blue;
      outline: none;
    }   

   input:invalid,
     select:invalid,
       textarea:invalid {
         border-color: red;
       }  

    input:valid,
     select:valid,
       textarea:valid {
         border-color: green;
       }

button:hover{
  background-color: green;
} 

.radio-group label {
  display:inline-block;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid orange;
  transition: all 0.3s ease;
}

.radio-group input[type="radio"]:checked  {
  border-color: red;
  background-color:black;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}



.radio-group input[type="radio"]:checked + label {
  color: blue;
  font-weight: bold;
}

input:first-of-type {
  border: 2px solid green;
  background-color: white;
}




Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

i got a error in the 17th step .radio-group input[type=“radio”}:checked + label .The 17th step is You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected. but i couldnt understand

What code did you write that you think should meet this requirement?