Build a Job Application Form

HTML-CSS
1

I cant solve my problem at step 18

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.

Sorry my English is not Good, and Im new at this kind of think

<!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>
        <h1>Job Resume</h1>
        <p>Full Name :</p>
        <label for="name"></label>
        <input type="text" id="name" name="name" placeholder="  Enter your name" required>
        <p>Email :</p>
        <label for="email"></label>
        <input type="email" id="email" name="email" placeholder="  Enter your email" required>
        <p>Position :</p>
        <label for="position"></label>
        <select id="position" name="position" required>
            <option value="" disabled selected>Select a Position</option>
            <option value="front-end">Front-End</option>
            <option value="back-end">Back-End</option>
        </select>
        <fieldset class="radio-group">
            <legend>Availability</legend>
            <input type="radio" id="remote" name="availability">
            <label for="remote">Remote</label>
            <input type="radio" id="on-site" name="availability">
            <label for="on-site">On-Site</label>
        </fieldset>
        <p>Why do you want this job?</p>
        <textarea id="message" name="reason" placeholder="write your motivation" required></textarea>
        <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

body {
  background-color: white;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
.container {
  padding: 15px 25px 30px;
  margin: 30px 10em;
  border-radius: 8px;
  box-shadow: 0 4px 8px grey;
}
h1 {
  text-align: center;
}
input:first-of-type {
  border-radius: 5px
}
input[type="text"], input[type="email"] {
  width: 98%;
  height: 30px;
  font-size: 16px;
  border-radius: 5px;
}
p {
  font-weight: bold;
}
select {
  width: 99.5%;
  height: 40px;
  font-size: 16px;
  padding-left: 10px;
  border-radius: 5px;
}
fieldset {
  margin-top: 30px;
}
textarea {
  width: 96.3%;
  height: 150px;
  border-radius: 6px;
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
input:focus, textarea:focus {
  background-color: rgb(239, 239, 239);
  outline: none;
  border-color: white;
}
input:valid, select:valid, textarea:valid {
  border: 2px solid green;
}
input:invalid, select:invalid, textarea:invalid {
  border: 2px solid red;
}
button:hover {
  background-color: blue;
}
input[type="radio"] {
  transform: scale(1.5);
  accent-color: green;
}
.radio-group label {
  color: black;
  transition: color 0.3s;
  cursor: pointer;
}
.radio-group input[type="radio"]:checked + label {
  color: green;
  font-weight: bold;
}
.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

}
button {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  background-color: green;
  color: white;
  border-radius: 5px;
}
2

can you point to which lines of code do this?

3

Is that this code

.radio-group input[type="radio"]:checked + label {
  color: green;
  font-weight: bold;
}
4

What does the + do here? https://www.w3schools.com/Css/css_combinators.asp

EDIT: Actually, it seems like you might have it the correct way

Can you share a link to the instructions/exercise?

Double check the definition of the + though.

5

Like this? https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

6

I would suggest never to add any extra features or effects that are not expressly asked for in the instructions. That can affect the tests.

For example, the tests expect that when the radio button is checked that the color of the label will change immediately.

1 Like
7

Thank you so much , finally…..:laughing:

1 Like