Step 18 (rare error)

HTML-CSS
1

I did everything I can to get step 18 correctly. But no! It says: 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.

What am I missing here?


/* file: styles.css */
body{
  font-family: arial, sans-serif;
  padding: 20px;
}
.container{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1{
  text-align: center;
}

input:invalid, select:invalid, textarea:invalid{
  border-color: red;
}

input, textarea, select{
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid white;
  border-radius: 4px;
  box-sizing: border-box;
}

input:valid, select:valid, textarea:valid{
  border-color: green;
}

input:focus, textarea:focus{
  border-color: violet;
}

.radio-group{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-group input[type="radio"]{
    margin-right: 10px;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: border-color 0.2s;
  }
.radio-group input[type="radio"]:checked{
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 
  color: blue;
}
input[type="radio"]:checked + label {
  color: blue; 
}

.radio-group label{
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

label{
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}


input:nth-child(1){
  border-radius: 5px;
}

button{
  background-color: green;
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 20px;
  border: 0px solid white;
  border-radius: 4px;
  color: white;
}

button:hover{
  background-color: black;
}
2

Hi! Welcome to the FCC comminity!

Could you please post the link to the step you’re trying to solve?

3

Would you please post your HTML and a link to the project?

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.

4

It’s not so rare https://forum.freecodecamp.org/search?q=pseudo-class%20on%20radio%20buttons%20order%3Alatest

5

please post your html too