Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

i have tried different code on this question, but it is not working., i need help.
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.

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>
            <fieldset>
            <legend>Personal details</legend>
            <label for="name">Full Name:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email">
            </fieldset><br>
            <fieldset>
            <select id="position" name="position">
                <option value="web-developer">Web developer</option>
                <option value="data-analyst">Data Analyst</option>
                <option value="hr-manager">HR Manager</option>
                <option value="cyber-security">Cyber Security</option>
            </select>
            </fieldset><br>
            
            <fieldset class="radio-group">
                <legend>Availability</legend>

                <label class="choice" for="part-time">Part-Time</label>
                <input type="radio" id="part-time" name="availability">
                <label class="choice"  for="full-time">Full-Time</label>
                <input type="radio" id="full-time" name="availability">
            </fieldset><br>
            
            <label for="message">Other Message</label>
            <fieldset>
            <textarea id="message" name="message" 
rows="15" cols="30"></textarea>
            </fieldset><br>
            
            <button type="submit">Submit</button>
            
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,textarea:focus {border: 50px solid yellow;}

input:invalid, select:invalid, textarea:invalid {border: 5px solid red;
}

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

button:hover {color: purple;
background-color: orangered;}

.radio-group input[type="radio"]:checked {
  outline: none;
  color: green;
  border: 5px solid green;
  background-color: green;
  box-shadow: 0 0px 1px 3px green
}

.radio-group input[type="radio"]:checked ~ label {
  color: green;
  }

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

2 
.radio-group input[type="radio"]:checked ~ label {
  color: green;
  }

What does the ~ do here?

3

general sibling selector.

4

can you describe what it does?

Do you want this to happen?
image

5

it connects input element with the label element so the text for the radio takes the color in the block.

no, because the text options color are not proper

6

that does not look like the general sibling selector description, I suggest you read more on it

7

i removed the symbol already, but its not going through.

then if i even put the labels first, it doesnt also work. have tried different options, but its not working

8

It’s counter-intuitive to put a label before a radio button. That’s part of your problem.

And then you can refer to this resource for help with your CSS selector:

https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator

9

okay sir.

thank you sir.

10

label + input[type=“radio”]:checked {

color: green;

}

this is the similar code i saw on the site, but its still not working

11

This was in reference to your HTML, not your CSS selector.

Also, please read again the first sentence from the link I provided.

And the reason this selector doesn’t work is because it selects the radio button following the label, and your selector needs to target the label.

12

okay sir. thank you so much, i appreciate

13

Thank you so much sir. i appreciate. sorted.

the problem was from my html code a s you stated. thank you for your help.