Build a Job Application Form - Build a Job Application Form

Curriculum Help
,
1

Tell us what’s happening:

I seem to keep being vexed by this part of styling; ‘You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected’. However, I did style the text color with the color, as indicated on my CSS, to change the text color, yet not accepted. Can someone direct me in the right direction?

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>
    <h1>Job Application Form</h1>
    <div class="container">
        <form>
            <label for="name">Name</label>
            <input type="text" id="name" placeholder="Full Name">
            <hr>
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Email Address">
            <hr>
            <label for="position">Position Applied</label>
            <select id="position"><option value="full-stack">Full-Stack Developer</option><option value="web-design">Web Designer</option><option value="c#-developer">C# Designer</option></select>
            <fieldset class="radio-group"><legend>Availability</legend>
                <input type="radio" id="yes" name="availability">
                <label for="yes">Remote</label>
                <input type="radio" id="no" name="availability">
                <label for="no">Hybrid</label>
                </fieldset>
                <fieldset>
                <label for="message">Why should we offer you this job?</label>
                <textarea id="message" name="message" rows="4" cols="50" placeholder="Your message">
                </textarea>
            </fieldset>
            <button type="submit">Submit Form<a href="#" class="button"></a></button>
        </form>
    </div>

</body>
</html>

/* file: styles.css */
body {
  background-color: lightblue;
  text-align: center;
}

.container {
  color: midnightblue;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px 20px;
  box-shadow: 0 5px 15px black;
}

input:focus, textarea:focus {
  border-color: black;
  transition: transform 0.3s, background-color 0.3s ease;
  outline: none;
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
  transition: transform 0.4s, border-color 0.4s ease;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
  transition: border-color 0.4s ease;
}

input, textarea[type="text"] {
  width: 80%;
  padding: 8px 10px;
  font-size: 1em;
  margin-bottom: 20px;
  border-color: gray;
  transition: border-color 0.2s ease;
}

button {
  background-color: blue;
  color: white;
  border-radius: 4px;
  padding: 10px 18px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.2s ease;
}


button:hover {
  background-color: lightblue;
  transition: background-color 0.3s ease;
}

.radio-group input[type="radio"]:checked {
  border-color: orangered;
  background-color: skyblue;
  box-shadow: 0 3px 6px blue; 
  display: inline-block;
  transition: background-color 0.3s ease;
}

.radio-group:has(input[type="radio"]:checked) {
  color: crimson;
  background-color: skyblue;
  border: 2px solid orangered;
  border-radius: 20px;
  transition: background-color 0.3s ease; 
}

input:first-of-type {
  border-radius: 5px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

try without transition property

3

the transition property has been removed. However, I had had activated my text-color through the :has functional pseudo-class selector.

4

now can you post your updated code if you still have issues?

5

Tell us what’s happening:

‘You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected’, is still an issue. As indicated previously, the text color is being activated on the :has fictional pseudo-class. How else could I have this accepted?

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>
    <h1>Job Application Form</h1>
    <div class="container">
        <form>
            <label for="name">Name</label>
            <input type="text" id="name" placeholder="Full Name">
            <hr>
            <label for="email">Email</label>
            <input type="email" id="email" placeholder="Email Address">
            <hr>
            <label for="position">Position Applied</label>
            <select id="position"><option value="full-stack">Full-Stack Developer</option><option value="web-design">Web Designer</option><option value="c#-developer">C# Designer</option></select>
            <fieldset class="radio-group"><legend>Availability</legend>
                <input type="radio" id="yes" name="availability">
                <label for="yes">Remote</label>
                <input type="radio" id="no" name="availability">
                <label for="no">Hybrid</label>
                </fieldset>
                <fieldset>
                <label for="message">Why should we offer you this job?</label>
                <textarea id="message" name="message" rows="4" cols="50" placeholder="Your message">
                </textarea>
            </fieldset>
            <button type="submit">Submit Form<a href="#" class="button"></a></button>
        </form>
    </div>

</body>
</html>

/* file: styles.css */
body {
  background-color: lightblue;
  text-align: center;
}

.container {
  color: midnightblue;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  margin: 20px auto;
  padding: 10px 20px;
  box-shadow: 0 5px 15px black;
}

input:focus, textarea:focus {
  border-color: black;
  transition: transform 0.3s, background-color 0.3s ease;
  outline: none;
}

input:invalid, select:invalid, textarea:invalid {
  border-color: red;
  transition: transform 0.4s, border-color 0.4s ease;
}

input:valid, select:valid, textarea:valid {
  border-color: green;
  transition: border-color 0.4s ease;
}

input, textarea[type="text"] {
  width: 80%;
  padding: 8px 10px;
  font-size: 1em;
  margin-bottom: 20px;
  border-color: gray;
  transition: border-color 0.2s ease;
}

button {
  background-color: blue;
  color: white;
  border-radius: 4px;
  padding: 10px 18px;
  cursor: pointer;
  margin-right: 10px;
  transition: background-color 0.2s ease;
}


button:hover {
  background-color: lightblue;
  transition: background-color 0.3s ease;
}

.radio-group input[type="radio"]:checked {
  border-color: orangered;
  background-color: skyblue;
  box-shadow: 0 3px 6px blue;
}

.radio-group:has(input[type="radio"]:checked) {
  color: crimson;
  background-color: skyblue;
  border: 2px solid orangered;
  border-radius: 20px; 
}

input:first-of-type {
  border-radius: 5px;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

6

you are still using the transition property, any delay caused by it is not compatible with the tests

7

No transitions in the code as instructed. Then again, that doesn’t solve my issue. I can get the text color on a :has functional pseudo-class and not with just a :checked?

8

:checked is only for the input element, a label can’t be checked, you can use :has or something else, but you need to select the label and change the color of the label, not of the parent .radio-group

9

Alright, I replaced the .radio-group with a field set which does change the color when selected, while on a functional pseudo-class.

10

the fieldset is still not the label tho, you need to change the label color