Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

i dont seem to get the rule 15.

“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.”

im open for any help, thanks in advance.

(btw i adjust some css to make it more fun, but i didn´t change the core components of the excersice, is just the rule 15, that i don´t seem to get right)

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">
        <h1>Vocaloid Application Form</h1>
        <form>
            <label for="name">Full Name</label>
            <input type="text" id="name" placeholder="Hatsune Miku" required>
            <label for="email">Email Address</label>
            <input type="email" id="email" placeholder="hatsunemiku2007@gmail.com" required>
            <label for="position">Position</label>
            <select id="position" required>
                <option value="1">Audio Designer</option>
                <option value="2">Character Designer</option>
                <option value="3">Software Developer</option>
                <option value="4">UI/UX Designer</option>
                <option value="5">Other</option>
            </select>
            <fieldset class="radio-group" name="availability">
                <legend>Availability</legend>
                <input id="full" type="radio" name="availability" required>
                <label for="full">Full-Time</label>           
                <input id="part" type="radio" name="availability" required>
                <label for="part">Part-Time</label>
            </fieldset>
            <textarea placeholder="Other Interests" id="message"></textarea>
            <button type="submit">Apply!</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  background: linear-gradient(to right, #f3f3f3, #e0e0e0aa);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  background: #153448;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  width: 450px;
  max-width: 100%;
  color: white;
}

h1 {
  text-align: center;
  border: 5px solid #3C5B6F;
  background-color: #153448;
  color: white;
  padding: 10px;
  margin: 20px;
  border-radius: 5px;
}


form {
  display: flex;
  flex-direction: column;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input, select, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 2px solid white;
  border-radius: 5px;
  font-size: 16px;
  background: #3C5B6F;
  color: white;
}

textarea {
  resize: vertical;
  height: 150px;
}

input:focus, textarea:focus {
  border-color: rgb(216, 88, 184);
  outline: none;
  box-shadow: 0 0 5px rgba(216, 88, 184, 0.5);
}

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

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


button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  background: black;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #7AB2B2;
}


.radio-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  padding: 8px 12px;
  border: 2px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}


.radio-group input[type="radio"]:checked + label {
  color: rgb(216, 88, 184); 
  background-color: white;   
  border-color: rgb(216, 88, 184);  
  box-shadow: 0 0 5px black; 
}


.radio-group input[type="radio"]:checked {
  border-color: yellow;
  background-color: pink;
  box-shadow: 0 0 5px black;
}


input:nth-child(1){
  color:gray;
}


@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Using class selector isn’t mentioned in the challenge instructions for test 15

3

I’m stuck on this also if anyone knows the right code please

4

Welcome to the forum @rmoski

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.