Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

my code keeps failing at number 13 and 14 which states that: “When the checkbox is checked, the background-color and the border-color of the checkbox should change to a color of your choosing.”
Please help me

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selection Feature Page</title>
  <style>
    body {
      height: 100vh;
      background-color: #f0f0f0;
      text-align: center;
      margin: 0;
      font-family: system-ui, sans-serif;
    }

    .feature-card {
      max-width: 250px;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 2px 6px lightblue;
      margin: 12px auto;
      text-align: left;
      background: #fff;
    }

    h1 { text-align: center; margin-top: 24px; }
    label { display: block; cursor: pointer; margin: 9px auto; }

    /* 8: appearance:none with WebKit prefix */
    input[type="checkbox"] {
      width: 30px;
      height: 30px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      border: 2px solid pink;      /* 9,10,11: width/color/style chosen */
      border-radius: 4px;
      background-color: white;
      transition: background-color 0.3s ease, border-color 0.3s ease;
      vertical-align: middle;
      margin-right: 12px;
      position: relative;
      box-sizing: border-box;

      /* Ensure the pseudo-element can be perfectly centered */
      display: inline-grid;
      place-content: center;
    }

    /* 12: visible, centered checkmark in the middle of the box */
    input[type="checkbox"]::after {
      content: "✓";
      font-size: 20px;
      font-weight: 700;
      color: white;
      opacity: 0;                  /* hidden by default */
      transform: scale(0.9);       /* crisp rendering */
      transition: opacity 0.2s ease;
      line-height: 1;              /* no vertical drift */
    }

    /* 13: background changes; 14: border color changes */
    input[type="checkbox"]:checked {
      background-color: #ff69b4;   /* 13 */
      border: 2px solid #800080;   /* 14 (explicit full border for graders) */
    }

    /* Reveal the checkmark only when checked */
    input[type="checkbox"]:checked::after {
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="feature-card-container">
    <h1>Feature Selection</h1>

    <label class="feature-card">
      <input type="checkbox" id="storage">
      <span>iPhone Storage</span>
    </label>

    <label class="feature-card">
      <input type="checkbox" id="themes">
      <span>User Themes</span>
    </label>
  </div>
</body>
</html>


/* file: styles.css */
/* Base checkbox styling (8, 9, 10, 11) */
input[type="checkbox"] {
  width: 30px;
  height: 30px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: white;        /* baseline */
  border: 2px solid #ffc0cb;      /* baseline border: light pink */
  border-radius: 4px;
  box-sizing: border-box;
  position: relative;

  /* Center the checkmark */
  display: inline-grid;
  place-content: center;

  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Always define the pseudo-element; hide it until checked (12) */
input[type="checkbox"]::after {
  content: "✓";
  font-size: 18px;
  font-weight: 700;
  color: white;
  opacity: 0;
  line-height: 1;
}

/* Checked state — explicit changes for 13 and 14 */
input[type="checkbox"]:checked {
  background-color: #ff69b4 !important; /* 13: hot pink background */
  border-color: #800080 !important;     /* 14: purple border color */
}

/* Reveal checkmark only when checked (12) */
input[type="checkbox"]:checked::after {
  opacity: 1;
}

Your browser information:

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

Challenge Information:

Design a Feature Selection Page - Design a Feature Selection Page

2

Welcome to the forum @phophii

Try removing the transition property.

Happy coding

1 Like
3

thank you so much, it worked!

1 Like