Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

To solve 17(17. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.) everybody is saying that you have to make a new selector for the label, but how exactly would you do that?

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">
    <form>
        <fieldset>
            <legend>Name</legend>
        <label for="name">Name</label>
        <input type="text" id="name" placeholder="ex: John Doe" required> 
        </fieldset>
        <fieldset>
            <legend>Email</legend>
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="ex: example@gmail.com" required>
        </fieldset>
        <fieldset>
            <legend>Job Position</legend>
           <select id="position" required>
               <option value="manager">Manager</option>
               <option value="consultant">Consultant</option>
               </select>
        </fieldset>
        <fieldset class="radio-group" required>
            <legend>Availability</legend>
        
        <input name="availability" type="radio" id="part-time">
        <label for="part-time">Part-Time</label>
        
        <input name="availability" type="radio" id="full-time">
         <label for="full-time">Full-Time</label>
        </fieldset>
        <fieldset class="message">
            <legend>Motivation</legend>
            <textarea id="message" placeholder="Why should you join our company?" cols="40" rows="20" required></textarea>
         </fieldset>
         <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
border-width:5px;
border-radius: 10px;
border-color: blue;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red;
}
input:valid, select:valid, textarea:valid {
  border-color: green;
}
button:hover{
  background-color: cyan;
}
.radio-group input[type="radio"]:checked{
  border-color: orange;
  background-color:green;
  box-shadow: 0 2px 3px; 
}

input:first-of-type{
  border-width: 3px;
}
body{
  background-color: green;
  box-shadow: 0 10px 20px
}
fieldset{
  margin: 20px 5px;
  padding: 1px;
}
.container{
  background-color: white;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Have you tried versions of this phrase in a search engine? That’s how I figured out what to do.

3

Another user had this problem: Build a Job Application Form - Test 15, :checked pseudo-class