I passed step 14 for this lab but I don’t know why!
- Passed:14. You should use the
:checked pseudo-class on .radio-group input[type="radio"] to add a border color, background color and a box shadow when the radio button is selected.
The styling does not appear in the preview when the radio button is selected with the satisfactory code below:
.radio-group input[type="radio"]:checked {
border-color: blue;
background-color: lightblue;
box-shadow: 10px 5px 5px blue;
}
But the test fails with the code below, even though the styling appears in the preview as expected:
.radio-group:has(input[type="radio"]:checked) {
border-color: blue;
background-color: lightblue;
box-shadow: 10px 5px 5px blue;
}
Here is the associated HTML:
<fieldset class="radio-group">
<legend>Select your specialty</legend>
<input type="radio" id="button1" name="availability" value="sociology" required>
<label for="button1">Sociology</label>
<input type="radio" id="button2" name="availability" value="criminology">
<label for="button2">Criminology</label>
</fieldset>
Browser: Safari version 18.4, Apple M4 Pro
Any advice or inspiration would be appreciated, I’m new to all this. Thanks.
Please post a link to the project. Thanks
Got it, is this what you need to see?
1 Like
I would do the following.
- Make sure on your radio inputs you are giving it an “ID” that is equal to your label’s “FOR” attribute. This is what links them…
- Look at the “Next Sibling Combinators”: Next-sibling combinator - CSS: Cascading Style Sheets | MDN.
- You’re looking to create a new selector based on that document that combines your “radio buttons checked” plus your “label” element .
- Make all your property adjustments there.
So is it just a trick question testing the correct targeting of the elements in CSS? What is the expected behavior of
.radio-group input[type="radio"]:checked {
border-color: blue;
background-color: lightblue;
box-shadow: 10px 5px 5px blue;
}
…which has no effect in the preview when the button is selected, even though it passes.
Can the radio inputs even take on properties like border-color, background-color, or box-shadow?
Its not designed as a trick question, no.
What is the expected behavior of
.radio-group input[type="radio"]:checked {
border-color: blue;
background-color: lightblue;
box-shadow: 10px 5px 5px blue;
}
…which has no effect in the preview when the button is selected, even though it passes.
Can the radio inputs even take on properties like border-color, background-color, or box-shadow?
Would you mind at all elaborating a little more for me? Thanks.
It would help if you posted all of your code (HTML and CSS) (and not as a picture).
Sure thing. Here’s all the HTML from the challenge:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="First Last"required>
<label for="email">Your Email</label>
<input type="email" id="email" placeholder ="example@xyz.com"required>
<label for="position">Select Your Position</label>
<select id="position" required>
<option value="" selected>Select an Option</option>
<option value="adjunct">Adjunct</option>
<option value="part-time">Part Time</option>
<option value="career-line">Career Line</option>
<option value="tenure-track">Tenure Track</option>
</select>
<fieldset class="radio-group">
<legend>Select your specialty</legend>
<input type="radio" id="button1" name="availability" value="sociology" required>
<label for="button1">Sociology</label>
<input type="radio" id="button2" name="availability" value="criminology">
<label for="button2">Criminology</label>
</fieldset>
<label for="message">Tell us a little about yourself.</label>
<textarea id="message" rows="5" cols="50" placeholder="Write here..."></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
and here’s the CSS:
input:focus, textarea:focus {
border-color: red;
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
button:hover{
background-color:lightblue;
}
.radio-group input[type="radio"]:checked + label {
color:grey;
}
.radio-group input[type="radio"]:checked {
background-color: red;
border-color: red;
box-shadow: 5px 5px 5px red;
}
/*
.radio-group input[type="radio"]:checked {
border-color: blue;
background-color: lightblue;
box-shadow: 10px 5px 5px blue;
}
input[type="radio"]:checked + label{
color:grey;
}
*/
input:first-of-type{
border-radius:40px;
}
Thank you again!
At least on my computer, I see the box-shadow but not the border or background colors.
Strange! Thanks for taking a look. Do you think it’s a browser issue? I just don’t want to move on if there’s a conceptual point I’m missing, and it’s not clear from the challenge or the example as to what is meant to be styled in step 14.
It looks like you added the styles that were requested in 14
Use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color, background color and a box shadow when the radio button is selected.
So a browser problem then?
There’s some HTML elements that your browser/OS will use their specific styling for and ignore some of your settings. I think that is happening here.
You can see what is expected to happen a bit better here: Playground | MDN
1 Like
Good to know. Should I switch from Safari to Chrome or another browser going forward to make better use of the preview?
Safari usually is the browser that least adheres to standards, but that’s not the core thing we see here.
1 Like
.radio-group input[type="radio"]{
appearance:none;
width: 20px;
border-radius:50%;
outline: none;
border:2px solid green;
}
Inspecting what FCC gave us as an example they used appearance none to clear the default formatting of the radio button.
1 Like
