Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I don’t get how to target the label for the radio buttons when they are checked, I don’t know what I’m missing

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" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Full Name: </label>
            <input type="text" id="name" placeholder="Enter your name">
            <label for="email">E-mail: </label>
            <input type="email" id="email" placeholder="Enter your e-mail">
            <label for="position">Position: </label>
            <select id="position">
                <option selected>Select a job position</option>
                <option>Developer</option>
                <option>Designer</option>
                <option>Manager</option>
            </select>
            <fieldset class="radio-group">
                <label for="availability">Availability</label>
                <input type="radio" name="availability" checked>Full-time
                <input type="radio" name="availability">Part-time
            </fieldset>
            <label for="message">Why do you want this job?</label>
            <textarea id="message" placeholder="I want this job because..."></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
body{
  background-color: #1b1b32;
  color: #f5f6f7;
}

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: #f5f6f7;
}

.radio-group input[type="radio"]:checked{
  border-color: black;
  background-color: #f5f6f7;
  box-shadow: 2px 2px 2px gray;
  color: yellow;
}

label input[type="radio"]:checked{
  color: green;
}

input:nth-child(1) {
    border-radius: 10px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

this is not valid, each input should have a label, and they are not properly associated, you may want to review how that is done

to give a “label” to a group of inputs you would use a legend element

1 Like
3 
html
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" id="fulltime" name="availability" checked>
                <label for="fulltime">Full-time
                <input type="radio" id="parttime" name="availability">
                <label for="parttime">Part-time
            </fieldset>

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

            /* 
            .radio-group label{
            color: green;
            } 
            */

this is what I came up with, the code in the commentary does target both labels inside the radio-group, but when I try to add the condition of the radio button being checked it doesn’t work

the way I see it the input[type="radio"]:checked is kinda like an “if” statement,
so I’m trying to tell the code to change the color of the label withing the class radio-group when the radio button is checked

4

your labels are missing a closing tag, please add it

second thing, your selector matches a checked input element inside a label element, not a label element

but css selectors don’t work like that
loop up selector combinators and pseudoclasses for this
has() may be of help, or for a different approach the + combinator

1 Like
5

you’re right, I was trying to use conditions instead of selectors
I changed it to simmply target the label of the checked input, and it does change color like the step asks me to, but it still doesn’t count it as completed, not sure why

this succesfully changes the color of the text for the checked radio input input[type="radio"]:checked + label{ color: green; }
also yes I forgot to close the label elements, thanks for that

6

share your updated code, let’s see

7 
<!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" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Full Name: </label>
            <input type="text" id="name" placeholder="Enter your name">
            <label for="email">E-mail: </label>
            <input type="email" id="email" placeholder="Enter your e-mail">
            <label for="position">Position: </label>
            <select id="position">
                <option selected>Select a job position</option>
                <option>Developer</option>
                <option>Designer</option>
                <option>Manager</option>
            </select>
            <fieldset class="radio-group">
                <input type="radio" id="fulltime" name="availability" checked>
                <label for="full-time">Full-time</label>
                <input type="radio" id="parttime" name="availability">
                <label for="full-time">Part-time</label>
            </fieldset>
            <label for="message">Why do you want this job?</label>
            <textarea id="message" placeholder="I want this job because..."></textarea>
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

body{
  background-color: #1b1b32;
  color: #f5f6f7;
}

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: #f5f6f7;
}

.radio-group input[type="radio"]:checked{
  border-color: black;
  background-color: #f5f6f7;
  box-shadow: 1px 1px 5px orange;
}

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

input:nth-child(1) {
    border-radius: 10px;
}
8

Make sure your id and for elements match. This is how to associate so they need to be the same. Each id and for pair need to match.

1 Like
9

lmao yeah I messed that up without even noticing
THANK YOU SO MUCH <3

1 Like