Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

please i need help on question 7 and 15.
someone should please write out the codes.
thank you.

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>
<div class="container">
    <form>
      <label for="name">Full name</label>
      <input type="text" id="name"> 
      <label for="email">Email Address</label> 
      <input type="email" id="email">
      <label for="position">Position</label>
      <select id="position">
          <option>Cyber Security</option>
          <option>Developer</option>
          <option>Data Analyst</option>
          <option>Programmer</option>
      </select>
      <fieldset class="radio-group">
          <legend>availability</legend>
          <label for="radio">Full-Time</label>
          <input type="radio" class="radio"></input>
          <label for="radio">Part-Time</label>
          <input type="radio"class="radio" ></input>
      </fieldset>
      <label>Tell us why you want this job role.</label>
      <textarea id="message" placeholder="write your thoughts here"></textarea>
    <button type="submit">Submit</button>  
    </form>
</div>
</body>
</html>

/* file: styles.css */
/* file: styles.css */
input:focus, textarea:focus {
  border-color: orange;
}

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

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

button:hover {
  background-color: purple;
}

.radio-group input[type="radio"]:checked {
    border-color: #007BFF;
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

input, label:checked{
  color: brown;
}

input:first-of-type {
background-color: #f0f0f0;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

that is not something that is going to happen

what issues are you having with those tests?

3

Hi @Racabisola , Please can you give a little more detail to what exactly you need help with and possibly what you have tried?

4

What they mean is step 15, they don’t know how to change the label of the associated checked radio button, in fact i’m currently having the Exact same issue. So what do we do here?

5

Hmm… So you’re trying to style the label of a radio button when that radio button is checked, right?

6

Okay, I think you should look at the structure of your inputs and labels
Are the labels before or after the inputs in the DOM?

Can CSS select a previous sibling, that is, can it reach “backward” to style a label based on the state of an input that comes after it? I don’t think that is how it works

If we test something like this:

<label for="full">Full-Time</label>
<input type="radio" id="full" name="availability">

and try to style the label using input:checked + label, will it work?

On the other hand, what if we place the input inside the label?

<label>
  <input type="radio" name="availability" value="full" />
  Full-Time
</label>

what happens when we use label input:checked or input:checked + span inside a styled label? Could that structure give us the control we want?

7

to style the label when the input is insite it there is the pseudoclass :has()

1 Like