Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Hey there,

My input background color and border color do change when input is checked but it won’'t let me pass.

Your code so far

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

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

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label class="feature-card">Cloud Storage<input type="checkbox"></label>
        <label class="feature-card">Dedicated Support<input type="checkbox"></label>
    </div>

</body>

</html>

/* file: styles.css */
body {
  background-color: whitesmoke;
  font-family: sans-serif, Arial;
  text-align: center;
}

.feature-card-container {
  background-color: lightgrey;
  padding: 50px;
  margin: auto;
  width: 80%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 0.5)
}


label {
  font-size: 1.2rem;
  background-color: whitesmoke;
  padding: 20px;
  margin-right: 10px;
  border-radius: 10px;
}

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: white;
  border: 2px solid green;
  border-radius: 4px;
  transition: all 0.2s;
  margin-left: 10px;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: grey;
  border-color: black;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  font-weight: bold;
  color: white;
  height: 20px;
  text-align: center;
}

label:hover {
  box-shadow: 2px 2px 5px 2px rgb(0, 128, 0, 0.5);
  cursor: pointer;
}

label:has(input[type="checkbox"]:checked) {
  background-color: rgba(0, 128, 0, 0.8);
  color: white;
  transition: 0.3s all ease-in;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.2 Safari/605.1.15

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

do not use transition property

3

Thank you so much! It worked.

4

in general feel free to use it! it’s just our tests do not manage to deal with the delay in property changes

5

Understood. Thank you again!