Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

hello everyone! i need your help, please. what’s wrong with my css: 14. When the checkbox is checked, the background color of the checkbox should change to a color of your choosing.
15. When the checkbox is checked, the border color of the checkbox should change to a color of your choosing

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>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css"/>
</head>

<body>
<div class="feature-card-container">
    <h1>Feature Selection</h1>
    <label class="feature-card">Ulimited access to TV series<input type="checkbox"/></label>
    <label class="feature-card">Unlimited Internet access<input type="checkbox"/></label>
    <label class="feature-card">50GB of Interner as a gift<input type="checkbox"/></label>
    <label class="feature-card">Premium Box<input type="checkbox"/></label>
</div>
</body>

</html>

/* file: styles.css */
body {
  height: 100vh;
  background: linear-gradient(to right top, rgb(54, 61, 60), rgb(96, 145, 135));
  color: rgb(207, 207, 207);
  text-align: center;
  margin: 0;
  padding: 40px 20px;
  box-sizing: border-box;
}

.feature-card-container {
  max-width: 400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.feature-card-container h1 {
  grid-column: span 2;
  margin-top: 0;
  margin-bottom: 30px;
}

label {
  border: 1px solid rgb(242, 242, 242);
  margin: 0;
  padding: 20px 30px;
  display: block;
  cursor: pointer;
  position: relative;
  border-radius: 10px;
  transition: all 0.3s ease;
  text-align: center;
}

label:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

input[type="checkbox"] {
  position: absolute;
  top: 1px;
  right: 1px;
  appearance: none;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border: 2px solid rgb(0, 66, 52);
  border-radius: 4px;
  background-color: rgb(148, 148, 148);
  transition: all 0.3s;
  vertical-align: middle;
}

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

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

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 YaBrowser/26.4.0.0 Safari/537.36

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

hello!

try removing this transition from input[type="checkbox"].

3

Thanks for your help. This solves the same issue on my side.

4

Thanks u for your help!!!