Design a Feature Selection Page - Design a Feature Selection Page

HTML-CSS
1

Tell us what’s happening:

When the checkbox is checked, the border color of the checkbox should change to a color of your choosing.

When the checkbox is checked, the background 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">
    <title>Selection Feature Page</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label for="green-card" class="feature-card">Green Card<input type="checkbox" id="primary-card" name="checkbox" value="card-green"></label>
        <label for="blue-card" class="feature-card">Blue Card<input type="checkbox" id="blue-card" name="checkbox" value="secondary-card"></label>
    </div>
</body>

</html>

/* file: styles.css */
h1{ 
  text-align: center;
}

.feature-card-container{
  display: grid;
  grid-template-columns: repeat(2, auto);
}

.feature-card{
  box-shadow: 0 2px 6px rgb(0, 0, 0, 0.2);
  max-width: 300px;
  padding: 20px;
}

.feature-card input[type="checkbox"]{
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #a8a8a8;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  background-color: #ffffff;
  vertical-align: middle;
  margin-right: 10px; 
}

input[type="checkbox"]:checked {
  background-color: #0075ff; /* Your chosen color */
  border-color: #0075ff;
}

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

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!

try removing the transition.

3

Can you explain to me more about how you know exactly what I have to remove for the code to work? Awesome!

4

I have read other posts where people got stuck with this issue. In this case the tests do not wait for the transition to complete before collecting the background-color andborder values, so they keep failing with the transition.

1 Like
5

Very good, tahanks a lot.

1 Like