Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

input[type=“radio”]:checked + label {
font-weight:bold; /* Changes the label text to red when its radio button is checked */

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" placeholder="FullName">
          <label for="email">email</label>
         <input type="email" id="email" placeholder="Email">
         <select id="position">
            <option>1</option>
            <option>2</option>
            <option>3</option>
         </select>
         <fieldset class="radio-group">
             <legend>availability</legend>
             <input type="radio" name="availability" id="availability">
             <label for="availability">FullTime</label>

             <input type="radio" name="availability" id="availability">
             <label for="availability">PartTime</label>

             <input type="radio" name="availability" id="availability">
             <label for="availability">Remote</label>
            <br></br>
             <label for="message">Why do you want this Job?</label>
             <textarea id="message" name="message" rows="5" cols="50">
             </textarea>

         </fieldset>
        <button type="submit">Submit!</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,textarea:focus{
  border:1px solid #e99494;
}
input:invalid,
select:invalid,
textarea:invalid{
  border:1px solid red;
}

input:valid,
select:valid,
textarea:valid{
  border:1px solid green;
}

button:hover{
  background-color:gray;
}

.radio-group input[type="radio"]:checked{
  border:1px solid purple;
  background-color:midnightblue;
  box-shadow:5px 5px 10px gray;
}




input:first-of-type {
  border-radius: 15px; /* Adds rounded corners */
  background-color: #f0f0f0; /* Changes background color for visibility */
}

. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

input[type="radio"]:checked  + label {
  font-weight:bold; /* Changes the label text to red when its radio button is checked */
}

Your browser information:

User Agent is: Mozilla/5.0 (iPad; CPU OS 26_2_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/143.0.7499.151 Mobile/15E148 Safari/604.1

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

how many times can you reuse an id?

3

OMG! What did I do!!

4

I corrected it , but still have same error and the error is in CSS code :frowning:

5

please post your updated code

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

6

Here is the updated code:

…

/* file: styles.css */
input:focus,textarea:focus{
  border:1px solid #e99494;
}
input:invalid,
select:invalid,
textarea:invalid{
  border:1px solid red;
}

input:valid,
select:valid,
textarea:valid{
  border:1px solid green;
}

button:hover{
  background-color:gray;
}

.radio-group input[type="radio"]:checked{
  border:1px solid purple;
  background-color:midnightblue;
  box-shadow:5px 5px 10px gray;
}
7

please share also your HTML

8 
<!-- 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" placeholder="FullName">
          <label for="email">email</label>
         <input type="email" id="email" placeholder="Email">
         <select id="position">
            <option>1</option>
            <option>2</option>
            <option>3</option>
         </select>
         <fieldset class="radio-group">
             <legend>availability</legend>
             <input type="radio" name="availability" id="availability">
             <label for="availability">FullTime</label>

             <input type="radio" name="availability" id="availability">
             <label for="availability">PartTime</label>

             <input type="radio" name="availability" id="availability">
             <label for="availability">Remote</label>
            <br></br>
             <label for="message">Why do you want this Job?</label>
             <textarea id="message" name="message" rows="5" cols="50">
             </textarea>

         </fieldset>
        <button type="submit">Submit!</button>
        </form>
    </div>
</body>
</html>
9

It is lastly passed with the following. Code , but i think that there is an error in the sequence in the required steps and what the right code is ::

input[type="checkbox"]:checked {
  background-color: #f1be32;
  border-color: #e2a60d;
}

input[type="checkbox"]:checked::before {
  content: "✓";
  display: block;
  text-align: center;
  background-color: #f1be32;
  border-color: #e2a60d;

}
input[type="checkbox"]:checked::after{
  content: "✓";
}
10

what do you think is the error?

11

I could not figure out,

12

that can’t be the right code you are putting the checkmark twice