Yes, I was wondering the same thing. Frank, check your HTML code, check that your label element directly follows your input element as suggested by dhess .
I’m pasting straight from the FCC HTML editor and then will select it here again and do ctrl/E:
<fieldset class="radio-group">
<legend>Availability:</legend>
<input type="radio" name="availability" id="fulltime" value="fulltime" checked>
<label for="fulltime">Full Time</label>
<input type="radio" name="availability" id="parttime" value="parttime">
<label for="parttime">Part Time</label>
</fieldset>
Now I’m doing the same for the CSS:
.
radio-group input[type="radio"]:checked + label {
color: green;
}
Very interesting. after ctrl/e ofor the CSS the “.” before radio-group appears on the line above the rest of the code. But it isn’t like that in the FCC CSS code editor???
the dot has escaped the code block, it should not be there
but for the most part now your code can be consulted easily!
anyway, for the tests, the div.container and the form element are required for the tests to pass, are you able to post all your html and css?
Yes, I’ll provide both the complete html and css and do a ctrl/e separately. But to start with I’m pasting the results of the tests so you can see that only 19 is a failure.
Tests:
Passed: 1. You should have a div element with the class container.
Passed: 2. Inside the div element, you should have a form element.
Passed: 3. The form should contain an input element with the type text and the id name for entering the user’s full name.
Passed: 4. You should have another input element with the type email and the id email for entering the user’s email address.
Passed: 5. The form should include a select element with the id position with some option elements.
Passed: 6. You should have a fieldset or section element with the class .radio-group.
Passed: 7. Inside .radio-group you should have a group of input elements with the type radio for selecting availability options. The group name should be availability.
Passed: 8. You should have a textarea element with the id message for entering a message.
Passed: 9. You should associate every input element with a label element.
Passed: 10. You should have a button element with the type submit for submitting the form.
Passed: 11. You should add a :focus pseudo-class to the input and textarea elements to change their border color when focused. Use a list selector in the given order.
Passed: 12. You should use the selector for the :focus pseudo-class for input and textarea to also remove the default outline when focused.
Passed: 13. The input, select and textarea elements should have an :invalid pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.
Passed: 14. The input, select and textarea elements should have a :valid pseudo-class that changes the border color to green when valid input is entered. Use a list selector in the given order.
Passed: 15. The button element should have a :hover pseudo-class that changes the background color when hovered over.
Passed: 16. You should use the :checked pseudo-class on .radio-group input[type=“radio”] to add a border color when the radio button is selected.
Passed: 17. You should use the :checked pseudo-class on .radio-group input[type=“radio”] to add a background color when the radio button is selected.
Passed: 18. You should use the :checked pseudo-class on .radio-group input[type=“radio”] to add a box shadow when the radio button is selected.
Failed: 19. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.
Passed: 20. Add a :first-of-type pseudo-class to the input elements to style the first input field differently.
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">
<h1>Restaurant Application Form</h1>
<form>
<fieldset>
<label for="name">Full Name: </label>
<input
type="text" name="full-name"
id="name" required
placeholder="Enter your name here ">
<label for="email">Your Email: </label>
<input
type="email" name="email" id="email" required
placeholder="E.g., lynn.doe@xyz.com: ">
<label for="position">Choose a position: </label>
<select name="position" id="position">
<option value="">Select one:</option>
<option value="host""host">Host</option>
<option value="server">Server</option>
<option value="buser">Buser</option>
</select>
<fieldset class=".radio-group">
<legend>Availability:</legend>
<input type="radio" name="availability" id="fulltime" value="fulltime" checked>
<label for="fulltime">Full Time</label>
<input type="radio" name="availability" id="parttime" value="parttime">
<label for="parttime">Part Time</label>
</fieldset>
<fieldset>
<label for="message">Tell us why you want this job??</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</div>
</body>
</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 ref="stylesheet" href=styles.css">
</head>
<body>
<div class="container">
<h1>Restaurant Application Form</h1>
<form>
<fieldset>
<label for="name">Full Name: </label>
<input
type="text" name="full-name"
id="name" required
placeholder="Enter your name here "
/>
<label for="email">Your Email: </label>
<input
type="email" name="email" id="email" required
placeholder="E.g., lynn.doe@xyz.com: "
/>
<label for="position">Choose a position: </label>
<select name="position" id="position">
<option value="">Select one:</option>
<option value="host""host">Host</option>
<option value="server">Server</option>
<option value="buser">Buser</option>
</select>
<fieldset class="radio-group">
<legend>Availability:</legend>
<input type="radio" name="availability" id="fulltime" value="fulltime" checked>
<label for="fulltime">Full Time</label>
<input type="radio" name="availability" id="parttime" value="parttime">
<label for="parttime">Part Time</label>
</fieldset>
<fieldset>
<label for="message">Tell us why you want this job?</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</div>
</body>
</html>
And here’s the CSS:
input:focus, textarea:focus {
border: 2px solid midnightblue;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: gray;
}
.radio-group input[type="radio"]:checked {
border-color: green;
background-color: green;
box-shadow: inset 000 4px;
}
input:first-of-type {
BORDER-TOP-LEFT-RADIUS: 4PX;
BORDER-TOP-RIGHT-RADIUS: 4PX;
}
.radio-group input[type="radio"]:checked + label {
color: green;
}
End of both HTML and CSS.
when you give a class to the fieldset you write class=".radio-group", with an extra dot at the start, that makes all selectors that use .radio-group not refer to this element
The HTML is duplicated in his last post. That particular error only shows up in the first one.
Thanks for catching that. I’ll be more careful going forward when pasting from vscode. So, I went into the FCC html editor, cleared out the duplication of the html at the end, corrected the .radio-group to be only radio-group, ran the test again, failed test 19 again, and am now again pasting the raw code from both html and css editors and doing a ctrl/e for each.
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">
<h1>Restaurant Application Form</h1>
<form>
<fieldset>
<label for="name">Full Name: </label>
<input
type="text" name="full-name"
id="name" required
placeholder="Enter your name here ">
<label for="email">Your Email: </label>
<input
type="email" name="email" id="email" required
placeholder="E.g., lynn.doe@xyz.com: ">
<label for="position">Choose a position: </label>
<select name="position" id="position">
<option value="">Select one:</option>
<option value="host""host">Host</option>
<option value="server">Server</option>
<option value="buser">Buser</option>
</select>
<fieldset class="radio-group">
<legend>Availability:</legend>
<input type="radio" name="availability" id="fulltime" value="fulltime" checked>
<label for="fulltime">Full Time</label>
<input type="radio" name="availability" id="parttime" value="parttime">
<label for="parttime">Part Time</label>
</fieldset>
<fieldset>
<label for="message">Tell us why you want this job??</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</div>
</body>
</html>
CSS:
input:focus, textarea:focus {
border: 2px solid midnightblue;
outline: none;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover {
background-color: gray;
}
.radio-group input[type="radio"]:checked {
border-color: green;
background-color: green;
box-shadow: inset 000 4px;
}
input:first-of-type {
BORDER-TOP-LEFT-RADIUS: 4PX;
BORDER-TOP-RIGHT-RADIUS: 4PX;
}
.radio-group input[type="radio"]:checked + label {
color: green;
}
Your solution works from my end. Please try one of the following steps to move forward.
Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.
or - Try the step in incognito or private mode.
or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.
or - Ensure your browser is up-to-date or try a different browser.
I hope one of these will work for you.
I carefully attempted all of your suggestions and none allowed test 19 (still my only failure). Additionally, just for testing I changed the color from green to red and using magnification as best I can tell the selected label is not changing colors. So I changed it back to green. Did you happen to see it change to green when you ran the code?
Yes. Your recent code passes the tests, and the radio button labels change to green when selected.
please check if you still have the class attribute containing a dot, what you write describes the behaviour of the code with the dot inside the class attribute for the .radio-group element
alternatively, please post the code you are having issues with
Good thought. My code does contain the dot. I’m providing the last three sections of my
CSS. Also, since you have my complete html and css will you let me know if the label color changes to green with the availability selection?
.radio-group input[type="radio"]:checked {
border-color: green;
background-color: green;
box-shadow: inset 000 4px;
}
input:first-of-type {
BORDER-TOP-LEFT-RADIUS: 4PX;
BORDER-TOP-RIGHT-RADIUS: 4PX;
}
.radio-group input[type="radio"]:checked + label {
color: green;
}
these are the last three sections of the code you posted earlier, and the code works
please post all the code you are using if you are still having issues
Hey ilm, I really appreciate your diligence trying to help me get through this. I took a long breath and considered this may be an issue related to the non-obvious. So I moved to a Windows 11 platform and used my onedrive to synchronize to my Windows 10 and submitted from the Windows 11… It PASSED! Thanks again. Frank