Https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-feature-selection/design-a-feature-selection-page

HTML-CSS
1

Help with passing test

  1. When the checkboxes are selected, there should be a checkmark ✓ in the center of the checkbox.

  2. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.https://www.freecodecamp.org/learn/responsive-web-design-v9/lab-feature-selection/design-a-feature-selection-page

  3. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.

My code does exactly what is required but it not passing

2

you will need to share your code, we are unable to help if you don’t share your code

3

the link i share will take you to the code

4

This is all the CSS

body {

  height:100vh;

  background-color: #f0f0f0;

  text-align:center;

}



input\[type='checkbox'\] {

  width: 20px;

  height: 20px;

  cursor: pointer;

  appearance: none;

  border: 2px solid #f1be32;

  border-radius: 4px;

  background-color: white;

  transition: all 0.3s;

  vertical-align: middle;

  margin-right: 15px;

}



input\[type='checkbox'\]:checked {

  background-color: #4CAF50;

  border-color: #2e7d32;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns=' http://www.w3.org/2000/svg '%3E%3Cpath d='M6 10l3 3 5-6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  background-size: 100% 100%;

  background-repeat: no-repeat;

  background-position: center;

}




.feature-card-container {

  max-width: 250px;

  padding: 20px;

  border-radius: 10px;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

  margin: auto;

  text-align: left;
5

here is the HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link rel="stylesheet" href="styles.css">

    <title>Selection Feature Page</title>

</head>

<body>

    

    <div class="feature-card-container">

        <h1>Feature Selection</h1>

        <label><input type="checkbox" />check</label>

        <label><input type="checkbox" />uncheck</label>

    </div>

</body>

</html>
6

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').