Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Can I get any help?
18. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
I have this error and I don’t know how to fix it.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name: <input type="text" id="name" placeholder="e.g.John Smith" required></input></label><br>
<label for="email">Email: <input type="email" id="email" placeholder="example@mail.com" required></input></label><br>
</fieldset>
<label for="position">Position
<select id="position" required> 
<option value="" disabled selected>Select a position</option>
<option value="barista">Barista</option>
<option value="shift-supervisor">Shift Supervisor</option>
<option value="assistent-manager">Assistent Manager</option>
<option value="manager">Manager</option>
</select></label>

<fieldset class="radio-group">
<legend>Availability</legend>
<label for="part-time"> <input type="radio" id="part-time" name="availability" value="part-time">Part-time</input></label>
<label for="full-time">
<input type="radio" id="full-time" name="availability" value="full-time">Full-time</input></label>
    </fieldset><br>
<label for="message">Why do you want to work here?
<textarea id="message" placeholder="Comments..." required>
    </textarea></label><br>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>

/* file: styles.css */
body{
padding:5px;
margin:5px;
}

.container{
  padding:20px;
  margin:15px;
}
select{
  margin:20px;
}

textarea{
  height:100px;
  width:200px;
}

h1{
  text-align:center;
}


input:focus, textarea:focus{
border-color:green;
outline:none;
}

input[type="text"]{
  margin:5px;
  width:150px;
}

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

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

button{background-color:lightgreen;
  width:150px;
  text-align:center;

}

button:hover{
background-color: darkgreen;
}

.radio-group input[type="radio"] {
  margin:15px;
}

.radio-group input[type="radio"]:checked { border-color:green;
  background-color: green;
  box-shadow:0.5px 1px;
  color:rgb(119,119,181);
}

.radio-group input[type="radio"]: label{
  color:rgb(119, 119, 181);
}

input:first-of-type{
  border-radius:2px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • Are there any errors or messages in the console?

If this does not help you solve the problem, please reply with answers to these questions.