Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

Failed:14. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.
Failed:15. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing. why this test is failing ?? color is changing but this test are not passing

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feature Selection</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Feature Selection</h1>

  <div class="feature-card-container">
    <label class="feature-card">
      <input type="checkbox">
      <h2>Cloud Storage</h2>
      <p>100 Gigabyte secure storage</p>
    </label>

    <label class="feature-card">
      <input type="checkbox">
      <h2>Extra Backup</h2>
      <p>Automatic daily backup</p>
    </label>
  </div>
</body>
</html>

/* file: styles.css */
.feature-card-container{
  display: flex;
  text-align: center;
  align-items: center;
  margin: auto 0;
  justify-content: center;
}
h1{
  text-align: center;
}
.feature-card{
 border:3px solid rgb(255, 196, 0);
 padding: 8px 10px;
 margin: auto 10px;
 text-align: end;
 border-radius: 6px;
}
.feature-card :where(p,h2){
  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: #f1be32;
  border-color: #e2a60d;
}

input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
   background-color: #f1be32;
  border-color: #e2a60d;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

hello @zisan77z welcome to the forum!

Try removing the transition.