Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hi,
I’m wondering why my code is failing to pass the 15th request. (" Build a Job Application Form- 15. 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 should note that my code works properly otherwise.

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>
        <lable for="name">Name</lable>          
        <input type="text"id="name" name="name" placeholder="Enter your name..." >

        <lable for="email">Email</lable>
        <input type="email" id="email" name="email" placeholder="Enter your email...">

        <lable for="position">Position</label>
        <select id="position" name="position" >
            <option  disabled selected>Select</option>
            <option>Manager</option>
            <option>Developer</option>
            <option>Designer</option>

        </select>
        <fieldset class="radio-group">
            <legend>Availability:</legend>
          <input type="radio" id="full-time" name="availability" value="full-time" checked>  
           <lable for="full-time">Full Time</lable>
           
            <input type="radio" id="part-time" name="availability" value="part-time">
            <lable for="part-time">Part Time</lable>

        </fieldset>
        
        <lable for="message" > Why do you want this job?</lable>
        <textarea id="message" name="message" ></textarea>
        <button type="submit">Submit</button>
        

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

/* file: styles.css */

.container{
  
  background-color: #f4f4f4;
  padding:20px;
  margin: 40px auto;
  align-items: center;
  width: 450px;
  height: 500px;
  box-shadow: 10px 10px 9px #c2c2c2;
  
}
h1{
  text-align: center;
}

input[type=text] ,input[type=email] , select  {
  display: block;
  max-width: 440px;
  width: 100%;
  margin: 10px;
  height: 30px;
  border-radius: 5px;
  
}
textarea{
  display: block;
  max-width: 440px;
  width: 100%;
  margin: 10px;
  height: 70px;
  border-radius: 5px;
}


button{
  display: block;
  max-width: 440px;
  width: 100%;
  margin: 10px;
  height: 30px;
  border-radius: 5px;
  background-color:#10af0d;
}

input:focus , textarea:focus{
  border-color:#cd9f59;
}

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

button:hover{
  background-color: #156613;
  transform: scale(1.03);
  transition: background-color 0.5s ease;
  
}
.radio-group input[type="radio"]:checked  {
  border-color: green;
  background-color: green;
  box-shadow: 1px 1px 1px green;
  
   

}



input:nth-child(1){
  color: black;
}


.radio-group label:checked {  
  color: black
  }

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Please check how you spelt label in your HTML file.

1 Like
3

in which part of the code

4

Look in the fieldset block with the class of 'radio-group

1 Like
5

The whole form element, actually, I didn’t notice it till now.

1 Like
6

thanks it work when I change it