Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hi. I am trying to solve two steps.
11. The input, select and textarea elements should have an :invalid pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.
12. The input, select and textarea elements should have a :valid pseudo-class that changes the border color to green when valid input is entered. Use a list selector in the given order.
can anyone tell me what went wrong?

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">
    <form>
         <label for="name">full name:</label>
        <input type="text" id="name" pattern="[A-Za-z\s]+" required placeholder="name">
        <label for="email">email:</label>
        <input type="email" id="email" placeholder="johndoe@gmail.com" required>
        <label for="position">Select your occupation:</label>
        <select id="position" required>
<option id="admin">administrator</option>
<option id="member">member</option>
<option id="visitor">visitor</option>
        </select>
        <fieldset class="radio-group">
            <legend>what position are you interested?</legend>
<input type="radio" name="availability" id="full-time" required> <label for="full-time">full time</label>
<input type="radio" name="availability" id="part-time" required> <label for="part-time">part time</label>
<input type="radio" name="availability" id="intern" required> <label for="intern">intern</label>
        </fieldset>
        <label for="message">any comments?</label>
        <textarea id="message" placeholder="type something.." cols="30" rows="10" required minlength="10"></textarea>
        <button type="submit">submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input:focus,textarea:focus{
  background-color:teal;
  color:yellow;
  border: 2px solid pink;
  outline:none;
}
textarea:invalid,select:invalid,input:invalid{
  
  background-color:white;;
  border-color:red;
}
textarea:valid,select:valid,input:valid{
  background-color:green;
  border-color:green;
}
textarea:hover,select:hover,input:hover{
background-color:yellow;
color:black;
}

textarea,select,input{
  background-color:coral;
  border-color:orangered;
}
form{
float: left;
    margin-right: 200px;
}
.container{
  background-color:grey;
  height:400px;
  width:400px;
}

button:hover{
  background-color:pink;
}
.radio-group input[type="radio"]:checked+label{
  color:orange;
  appearance:none;
  }
  .radio-group input[type="radio"]{
 appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid black;
     outline: none;
    background-color: white;
            cursor: pointer;
  }
.radio-group input[type="radio"]:checked{
  box-shadow:2px 3px black;
  background-color:yellow;
  border-color:purple;
  }
input:nth-child(1){
  border-radius:20px;
}
label:checked{
 color: green;
}

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

The selectors are fullfil the css requirements, but aren’t in order as requested in the challenge editor.

that one’s also.

1 Like
3

thank you so much . It works now I followed the order of input, select and textarea.

1 Like