Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I can’t make the input’s background color turn red only when the element is invalid. Instead it is red all the time and not yellow(the intended colour)

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">
    <form>
        <fieldset>
            <legend>yer name:</legend>
            <input type="text" id="name" required>
        </fieldset>
        <fieldset>
            <legend>yer email:</legend>
            <input type="email" id="email" required>
        </fieldset>
        <fieldset>
            <legend>select what you want:</legend>
            <select id="position">
                <option>administrator </option>
                <option selected>player</option>
               <option>member</option>
            </select>
        </fieldset>
        <fieldset class="radio-group">
            <legend>how long can you work:</legend>
            <label for="full-time">full time<label>
            <input type="radio" id="full-time" name="availability" checked>
             <label for="part-time">part time<label>
            <input type="radio" name="availability" id="part-time">
             <label for="intern">intern<label>
            <input type="radio" name="availability" id="intern">
        </fieldset>
        <fieldset>
            <legend>what are your (other) comments? </legend>
            <textarea id="message"cols="20" rows="5" placeholder="type something.."required></textarea>
        </fieldset>
        <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
input, select, textarea {
  background-color:yellow; 
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

input:focus, textarea:focus {
  background-color: black !important;
  color: white;
  border-color: grey;
  outline: none;
}

input:valid, select:valid, textarea:valid {
  background-color: green;
}

input:invalid, select:invalid, textarea:invalid {
  background-color: red;
}

button:hover {
  background-color: pink;
}

.radio-group input[type="radio"]:checked {
  background-color: yellow;
  border: 2px solid green; /* Corrected here */
  box-shadow: 2px 3px red;
  color: yellow;
}

input:nth-child(1) {
  border-radius: 20px;
}

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

I just ran the code and changed background to border and it went back to yellow. Happy Coding!

3

i don’t see any difference in the console . It seems to be the same even when I change it

input, select, textarea {
  border-color:yellow; 
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}
4

Hey there!
I think this step doesn’t want you to change the border-color of the form elements elements. Instead. it’s the border-color of the pseudo-classes ( valid, invalid…) as well. Try applying it to your code and see if it helps.
Good luck!

5

I changed this code, so I really don`t know if I solved your issue but it passed user story 11.

  1. 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. 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. // tests completed