Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I have tried all the methods to solve this task, but it is not working. Step 18 on the job application form requires one 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>
    <h1>Job Application Form</h1>
    <div class="container">
        <label for="name">Full Name:</label>
        <form>
            <input type="text" id="name">
            <label for="email">Email:</label>
            <input type="email" id="email">
            <label for="position">Position:</label>
            <select id="position">
                <option>Data Analyst</option>
                <option>Developer</option>
                <option>Software Engineer</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
               
                <input type="radio" id="name" value="name" name="availability">
                 <label for="name">Full-Time</label>
                
                <input type="radio" id="name" value="name" name="availability">
                <label for="name">Part-Time</label>
                
            </fieldset>
            <label for="message">Why do you want this job?</label>
            <textarea id="message"></textarea>
            <button type="submit">Submit Form</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
  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: red;
}

.radio-group input[type="radio"]:checked {
    border-color: #007BFF;
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


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

input:first-of-type {
  color: lightgreen;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Welcome to the forum @ngangachristopher0

Are all id values unique?

Happy coding

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.