Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I’ve read various people’s questions about this but none of them seemed to help me resolve this. I’m afraid that I just don’t understand the syntax to resolve this.

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" name="name" placeholder="Ex: John Doe">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Ex: youremail@email.com">
            <label for="position">Position:</label>
            <select id="position" name="position">
                <option value="developer">Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Manager</option>
            </select>
            <label for="radio-group"/>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <label for="full-time">Full Time: </label>
                <input type="radio" id="full-time" name="availability">
                <label for="part-time">Part Time: </label>
                <input type="radio" id="part-time" name="availability">
            </fieldset>
            <textarea id="message"></textarea>
            <button type="submit" id="submit" name="submit">Submit</button>
        </form>
    </div>

</body>
</html>

/* file: styles.css */
input:focus, textarea:focus {
  border: orange;
}
input:invalid, select:invalid, textarea:invalid {
  border: red;
}
input:valid, select:valid, textarea:valid {
  border: green;
}
button:hover {
  background-color: yellow;
}
.radio-group input[type="radio"]:checked {
  border: darkblue;
  background-color: lightgreen;
  box-shadow: 10px 10px;
}
label:checked {
  color: white;
  padding: 8px;
}
input:first-of-type {
  font-family: sans-serif;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0

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

I’ve tried part-time:checked, full-time:checked { color: white; padding: 8px; }

But that doesn’t do it. I created a class=”full-time” and a class=”part-time” within the label for the radio buttons. Then I tried .part-time:checked, .full-time:checked {color: white; padding: 8px; }

But that doesn’t work either.

3

review this https://www.freecodecamp.org/learn/full-stack-developer/lecture-what-is-css/what-are-the-different-types-of-css-combinators

4

I’m sorry, but that is not helping me. I don’t even know what to google to look this up. I’ve tried:

fieldset + .full-time:checked, fieldset + .part-time:checked {

color: white;

padding: 8px;

}

&

fieldset + label:checked {

color: white;

padding: 8px;

}

The problem I have is that you are asking me to format the label when the input is selected. I just don’t know how to make B change when A is changed.

5

I’ve found a forum on stackoverflow that seems to address this issue but what they suggest doesn’t work either.

I’ve tried input[type=“radio”]:checked + label {

color: blue;

padding: 8px;

}

But they say this only works for a label is after the radio button, mine is prior. So then they suggest using the “~” sign instead of “+” for a non-adjaccent element, but that doesn’t work either as apparently the “~” works for a following non adjacent element. Was a situation like this discussed at all in the reading leading up to this challenge? if so, I’m not seeing it.

I’ve also tried reversing it to have label first in case that would make it work when the label is prior, but it still doesn’t work:

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

color: blue;

padding: 8px;

}

6

Ok, so I just moved my labels to after each radio button and
input[type=“radio”]:checked + label {

color: blue;

padding: 8px;

}

worked

7

good job, you managed to solve it!

fieldset is not sibling with the label and input, it’s their parent, so the + would not work there

8

Hi there! I have been having the same problem, and I read your question and all your answers, but I can’t quite understand why it is not working. Also, why do you call it as “input[type=”radio”]” ? Can you help me understand how to make it work? Thank you

9

hi @MariDq please creare your own topic to ask your question

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 Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for 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.