Design a Feature Selection Page - Design a Feature Selection Page

Curriculum Help
,
1

Tell us what’s happening:

Code won’t pass saying the checkbox’ background-color and border need to change when checked, tried a couple of things none of them work.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Selection Feature Page</title>
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card">
        <input type="checkbox">Custom color
    </label>
     <label class="feature-card"><input type="checkbox">Custom font</label>
    </div>
</body>

</html>

/* file: styles.css */
input[type="checkbox"]{
  width: 20px;
  height: 20px;
  appearance: none;
  border: 2px solid #f79889;
  cursor: pointer;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}

input[type="checkbox"]:checked::after{
content: "✓";
border-color: yellow;
background-color: purple;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Tell us what’s happening:

changes made (wrong upload with previous question): steps won’t pass

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Selection Feature Page</title>
</head>

<body>
<h1>Feature Selection</h1>
<div class="feature-card-container">
    <label class="feature-card">
        <input type="checkbox">Custom color
    </label>
     <label class="feature-card"><input type="checkbox">Custom font</label>
    </div>
</body>

</html>

/* file: styles.css */
input[type="checkbox"]{
  width: 20px;
  height: 20px;
  appearance: none;
  border: 2px solid #f79889;
  cursor: pointer;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}

input[type="checkbox"]:checked::after{
content: "✓";
}

input[type="checkbox"]:checked{
   background-color: #f1be32;
  border-color: #e2a60d;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/freeCodeCamp · GitHub

3

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

4

Hi @chaosAngel666,

Please remove this transition property setting from your input\[type="checkbox"\] selector. It causes a delay that borks the tests.

Happy coding

5

did that, still doesnt work:

input\[type="checkbox"\]{

  appearance: none;

border-width: 5px;

border-color: black;

border-style: solid;

cursor: pointer;

}

input\[type="checkbox"\]:checked::after{

content: "✓";

background-color: pink !important;

border-color: white !important;

}
6

I’ve formatted your code for you.

In the future, please format your code as follows:

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

7

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.