Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Hello everyone,
Last two steps of the project which is asking for changing the the checkbox background-color and it’s border color after checked, and I checked it many times, and searched on web, the code must be right but it’s still not passing…

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>

    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label class="feature-card">Feature 1
        <input type="checkbox"/></label>
        
        <label class="feature-card">Feature 2
        <input type="checkbox"/></label>

        <label class="feature-card">Feature 3
        <input type="checkbox"/></label>

        <label class="feature-card">Feature 4
        <input type="checkbox"/></label>

        <label class="feature-card">Feature 5
        <input type="checkbox"/></label>

        <label class="feature-card">Feature 6
        <input type="checkbox"/></label>

    </div>


<body>

</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 {
  background-color: #f1be32;
  border-color: #e2a60d;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;

}

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2
  • it seems like due to this its not passing!!

try without it, happy coding :slight_smile:

3

Many thanks for help, but unfortunately it did not work even I tried…

4

checkout this topic thread, hopefully this would be useful Design a Feature Selection Page - Design a Feature Selection Page

5

Are you sure? If I remove the transition your code passes for me.

Maybe reset the lab and paste your code back in.

If it still does not work please share your updated code.

6

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.