Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

  1. 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 made the changes but it still presists.

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 href="styles.css">
</head>
<body>
    <header></header>
 <div class="container">
     <h1>Job Application Form</h1>
     <form>
         <label for="name" name="name">Full Name:</label>
         <input id="name" type="text"><label for="email" name="email">Email:</label><input id="email" type="email"><label for="position" name="position">Position:</label>
         <select id="position">
             <option value="developer" >Developer</option>
             <option value="programmer">Programmer</option>
             <option value="debugger">Debugger</option>
             </select>
             
             <fieldset class="radio-group" >
                 <legend>availability</legend>
                 <label for="full-time">Full-Time</label>
                 <input id="full-time" type="radio" value="full-time" name="availability" required>
                 
                 
                 <label for="part-time">
                 Part-Time</label>
                 <input id="part-time" type="radio" value="part-time" name="availability" required>
             </fieldset>
                 <h2>Why do you want this job?</h2>
                 <textarea id="message">
                     </textarea>
                     <button type="submit">Submit</button>
         </form>
     </div>
</body>
</html>

/* file: styles.css */
body{background-color:#A47864;
margin: 0px;
padding:0px 
font-family:Arial,sans-sarif}
h1{text-align:center}

.container{max-width:600px;
margin: 50px auto; padding:20px}

input:focus,textarea:focus{border: 2px solid green}

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

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

button:hover{background:azure;}

.radio-group input[type="radio"]:checked{border-color:steelblue;
background-color:#66cc;box-shadow: 0px 1px 2px; text-color:magenta}
.radio-group input[type="radio"]:checked + label{color:maroon}
radio-button:checked{color:cornsilk;} 
input:first-of-type{border-radius:20px}

Your browser information:

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

you may want to look at what the + combinator does

also you can’t have both radio buttons as required, they can’t be both checked at the same time

1 Like
3

Thank you very much . i spent 1 hr looking for my mistake. I truely appretiate your help.