Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

The user story no. 15 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”.
I think I have tried resolving it but I no way. I would appreciate it if I can get some help here. Thanks!

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">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
<div class="container">
    <h1>Job Application</h1>
    <form>
        <label for="name">Full Name:</label><br>
        <input type="text" id="name" placeholder="Enter your name" required><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" placeholder="Enter your email" required><br>

        <label for="position">Position:<br></label>
        <select id="position"
        name="position" placeholder="Select a position">
        <option value="" selected hidden>Select a position</option>
            <option value="Chief Executive Office">Chief Executive Officer</option>
            <option value="Chief Finance Officer">Chief Finance Officer</option>
            <option value="Manager">Manager</option>
            <option value="Sales Manager">Sales Manager</option>
            <option value="Receptionist">Receptionist</option>
            <option value="Security Officer">Security Officer</option>
        </select>

        <fieldset class="radio-group">            <legend>Availability</legend>
        
        <label for="full-time" class="input-text">
        <input type="radio" id="full-time"  name="availability">Full-Time</label>
        <br>

                <label for="part-time" class="input-text">
                    <input type="radio" id="part-time" name="availability">Part-Time</label>
        </fieldset>

        <p>Why do you want this job?</p>
        <textarea id="message">Write your motivation...</textarea><br>

<button type="submit">Submit Application</button>
 

    </form>
</div>
</body>
</html>

/* file: styles.css */
div.container{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  background-color: #eee;
}

form{
  width: 90%;
  margin-right: inherit;
  margin-left: inherit;
  min-height: 95vh;
  background-color: #fff;
  padding: 10px;
  font-family: Verdana, sans-serif;
  font-variant: small-caps;
}

h1{
  font-size: 30px;
  font-family: Georgia, serif;
  font-weight: bold;
  text-align: center;
  margin: 5px;
  padding: 20px;
}

#name, 
#email, 
#position{
  width: calc(100% - 10px);
  margin-bottom: 12px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 3px;
}

select{
  padding: 10px;
  min-width: calc(100% - 2px);
  font-family: cursive;
}

textarea#message{
  width: calc(100% - 10px);
  margin-top:-15px;
  height: 20vh;
  border-radius: 3px;
  font-family: cursive;
}

input[type="text"],
input[type="email"]{
  height: 30px;
  padding: 3px;
  font-family: cursive;
}

.radio-group .input-text{
  font-size: 1.01em;
  font-variant: normal;
  font-family: cursive;
}

#full-time:checked,
#part-time:checked{
  color: brown;
  background-color: brown;
}

.radio-group input[type="radio"]:checked{
  border-color: red;
  background-color: navy;
  box-shadow: inset 0 0 0 4px gold;
}

input[type="radio"]{
  margin: 8px;
}

fieldset{  
  border-radius: 3px;
}

input:focus,
textarea:focus{
  border: 1px solid yellow;
  
}

input:invalid,
select:invalid,
textarea:invalid{
  border: 1px solid red;
}

input:valid,
select:valid,
textarea:valid{
  border: 1px solid green;
}

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

button{
  text-align: center;
  min-width: calc(100% - 4px);
  height: 50px;
  font-size: 1.14em;
  border-radius: 3px;
  margin-top: 15px;
  font-variant: small-caps;
}

button:hover{
  background-color: brown;
  color: white;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

You can try to change the positions of associated label and radio input elements

Origin:

<label for="full-time" class="input-text">
<input type="radio" id="full-time"  name="availability">Full-Time</label>

See their relationship between each other after exchanging their positions. The input immediately follows the associated label

Modified:

<input type="radio" id="full-time"  name="availability">Full-Time</label>
<label for="full-time" class="input-text">

After doing that,you can try CSS next-sibling combinator first selecter + second slector.

It will select the elements chosen by the first selector that immediately follows the elements who match the second selector.

In this case,the instruction tell you to select the associated label when the option is selected.

You have two things to do.

  • Select the radio button when it is in a state of being checked.
  • Select the associated label of the radio button

If you want to select the radio button when it is in a state of being checked,
you are going to use :checked pseudo-class like input[type="radio"]:checked

If you want to select the associated label when the radio button is in a state of being checked,at the same time,you see the exchanged positions between associated label and radio input above.

The CSS next-sibling combinator comes to help you.

It allows you to select the the associated label that immediately follows the radio button
when it is in a state of being checked.

Happy Coding! Welcome!

1 Like
3

Thank you so much. You saved the day

1 Like
4

You are welcome.I was also confused about it when doing this little project…haha