Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I can’t, for the life of me, figure out why it’s not working. It keeps failing on step 18 no matter what I try.

Step 18 says “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">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Name: </label>
            <input type="text" id="name" placeholder="Ex. John Doe" required>

            <label for="email">Email: </label>
            <input type="email" id="email" placeholder="example@email.com" required>
            
            <label for="position">Position: </label>
            <select id="position" required>
                <option value="select-position"disabled selected>Select a position</option>
                <option>Option A</option>
                <option>Option B</option>
            </select>

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

                <label for="availability">Full-Time<input type="radio" name="availability"></label>

                <label for="availability">Part Time<input type="radio" name="availability"></label>

            </fieldset>
            
            <label for="reason">Why do you want this job?</label>
            <textarea id="message" placeholder="Type your reasoning here" name="reason" required></textarea>

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

/* file: styles.css */
body {
  background-color: rgb(50, 50, 50);
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: auto;
  padding: 2rem;
}

h1 {
  text-align: center;
}

.container {
  width: 75%;
  position: relative;
  background-color: grey;
  border-radius: 5px;
  box-shadow: 0 5px 7px black;
  margin: 0 auto;
  padding: 2rem;
}

label {
  display: block;
  margin: 1rem 0 0.3rem;
  color: black;
  font-weight: bold;
}

form {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

input[type="text"], input[type="email"], select, textarea {
  border-radius: 15px;
  width: 90%;
  padding: 1rem;
  font-size: 1rem;
}

input:first-of-type {
  background-color: lightblue;
}

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

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

fieldset {
  border-radius: 16px;
  border-color: white;
  border-width: 2px;
  margin-bottom: 20px;
}

.radio-group {
  margin-top: 1.2rem;
}

.radio-group legend{
  font-weight: bold;
  margin-bottom: 0.8rem;

}

.radio-group input[type="radio"] {
  appearance: none;
  border-color: white;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0px 2px 4px black;
  height: 20px;
  width: 20px;
  margin-left: 25px;  
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 20%;
}

.radio-group input[type="radio"]:checked {
  appearance: none;
  border-color: lightgreen;
  border-radius: 50%;
  background-color: green;
  box-shadow: 2px 2px 2px black;
  height: 20px;
  width: 20px;
  margin-left: 25px;
}

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

button {
  background-color: rgb(12, 190, 12);
  border-color: rgb(50, 163, 50);
  border-radius: 15px;
  padding: 10px;
  font-size: 20px;
  color: black;
}

button:hover {
  background-color: black;
  color: white;
  border-color: lightgrey;
}

input:focus, textarea:focus {
  border-color: lightblue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 OPR/119.0.0.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

the + will not match the label with the html structure you have, you may want to look up how to use it, or how to select the label in your situation