Build a Job Application Form - Build a Job Application Form

HTML-CSS
1
  1. 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 thought it would be:

input[type=“radio”]:checked + label{
color:green;

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>\
    <h1 id='header'>Job Application Form</h1>
    <div>
      </div>
    <div class='container'>
      <form>
        <label for='name' >Full Name:</label>
        <input id='name' type='text' required placeholder='Enter Your Full Name'></input>
        <label for='email'id='email'>Email:</label>
        <input id='email' type='email' placeholder='Email'required><input>
        <div>
          <label for='position'>Position</label>
          <select id='position'>          
            <legend>Choose one</legend>
            <option value='' disabled selected>Select one</option>
            <option value='wrestler'>Wrestler</option>
            <option value='manager'>Manager</option>
            <option value='comentator'>Commentator</option>
         </select>
       </div>
      <label for='availablity'>Availablity</label>
      <fieldset class='radio-group'>
        <legend>Choose one</legend>
        <label for='full-time'>Full Time</label>
        <input type='radio' name='availability' id='full-time'></input>
        <label for='part-time'>Part Time</label>
        <input type='radio' name='availability' id='part-time'></input>
       
      </fieldset>
      <label for'textarea'>Why do want this job<label>
      <textarea required id='message' rows='5'placeholder='Explain your motivation'></textarea>
      <button type='submit' id='submit'>Submit Application</button>
    </form>
    </div>

</body>
</html>

/* file: styles.css */
*{
  background-color:gray;
  padding:auto;
  border:auto;
}
body{
font-family: Arial, sans-serif;
line-height: 1.6;
 margin:10px;
 padding:10px;
 border:10px;
 display:absloute;
}
h1{
  text-align:center;
  font-size:60px;
  background-color:magenta;
  border:10px 99%;
  padding:10px 50px;
  border-radius:10px;
  
}
input{
  background-color:white;
}
option{
  background-color:white;
}
input:first-of-type{
  border: 2px solid blue;
  font-weight:strong;
}
input:focus, 
textarea:focus {
  border-color:gold;
}

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

textarea{
  background-color:white;
}
.radio-group input[type="radio"]:checked {
  border: 2px solid blue; 
  background-color: lightblue;
  box-shadow: 0 0 5px blue; 
  text-color:gold;
}
input[type="radio"]:checked + label{
color:green; 
 
 
}
button{
  width:99%;
  height:20px;
  background-color:magenta;
}
button:hover{
  background-color:purple;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

do you remember what is the exact meaning of the + combinator?

have you tried what happens when you select the buttons in your app?

1 Like
3

The selector is called a Next-sibling combinator. Emphasis on “next”.

Is the relevant label the next sibling element after the input?

As an aside, remember that input elements are void elements. They do not take content, so they do not have a closing tag.

1 Like