Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I am unable to complete #18, could someone help me with my code.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="styles.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Application Form</title>
     
        
   </head>
<body>
  <div class="container">
      <form>
        <label for="name">Full Name:
      <input type="text" id="name"/></label>
        <label for:"text">Email:
          <input type="email" id="email"/></label>
            <select id="position">
            <option id="position">Poop</option>
            <option id="position">Turd</option>
          </select>

        <fieldset class="radio-group">
        <label for="radio">Yellow
        <input type="radio" name="availability" class="radio"/></label>
        
        <label for="radio">Green
        <input type="radio" name="availability" class="radio"/></label>
        
        <label for="radio">Blue
        <input type="radio" name="availability" checked class="radio"/></label>
        
          <textarea id="message"></textarea>
           <button type="submit">Submit</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: orange;
}
.radio-group input[type="radio"]:checked{
  border-color: brown;
  background-color: brown;
  box-shadow: 0 0 0 0 black;
}

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

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

3

18. 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’ll give you the trick but not the solution: You can’t override the default features of HTML. To change those characteristics you must first delete them from the stylesheet.