Build a Job Application Form - Build a Job Application Form

Curriculum Help
,
1

Tell us what’s happening:

I cant figure out:

  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. !!!

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">Name: </label>
        <input type="text" id="name"></input>

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

        <label for="position">Position: </label>
        <select id="position"><option>hostess</option><option>barista</option></select>
        <fieldset class="radio-group">
            <label for="fulltime">Full-time</label>
            <input id="fulltime" name="availability" type="radio"></input>
            <label for="parttime">Part-time</label>
            <input id="parttime" name="availability" type="radio"></input>
            <label for="contract">Contract</label>
            <input id="contract" name="availability" type="radio"></input>
        </fieldset>
<label for="message">What is you're desired wage?</label>
<textarea id="message"></textarea>

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

/* file: styles.css */
input:focus, textarea:focus {border-color: yellow; outline: none;}

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

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

button:hover {background-color: blue;}

.radio-group input[type="radio"]:checked {border-color: blue; background-color: lightblue; box-shadow: 0 0 5px;}

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

.radio-group input[type="radio"]:checked + label {color: red;}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Think about the order of the elements in your HTML and what is being selected

3

right and it’s: fieldset class, label element, then input id?

4

the “+” symbol selects an element that comes after the initial selector