Design a Feature Selection Page

HTML-CSS
1

Prompt 12 is asking:

When the checkboxes are selected, there should be a checkmark ✓ in the center of the checkbox.

Unfortunately it is not giving me a go for my code. Here is my HTML and CSS

.feature-card-container{

  display: grid;

  grid-template-column: repeat(3, 2fr);

  gap: 10px;

  max-width: 600px;

  margin: 0 auto;

}





label{

  border: 2px solid black;

  display: inline-block;

  margin: 2px auto;

  padding: 10px;

}




input[type='checkbox'] {

  width: 20px;

  height: 20px;

  cursor: pointer;

  appearance: none;

  border: 2px solid black;

  border-radius: 4px;

  background-color: white;

  transition: all 0.3s;

  vertical-align: middle;

  margin-right: 15px;

  position: relative;

}




input[type='checkbox']:checked {

  background-color: beige;

  border-color: black;

}




input[type='checkbox']:checked::after{

  content: "✓";

  display: block;

  text-align: center;

  position: absolute;

  line-height: 20px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 16px;

  color: black;

}

Did I do something wrong?

2

please share also your html and a link to the challenge

you can try removing transition

3

Yeah here it is!

<!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>BIGBANG
            <input type="checkbox">
        </label>

        <label>SNSD
            <input type="checkbox"></label>

        <label>BTS
            <input type="checkbox"></label>

        <label>BLACKPINK
            <input type="checkbox">
        </label>

        <label>STRAY KIDS
            <input type="checkbox">
        </label>

        <label>TWICE
            <input type="checkbox">
        </label>

    </div>


</body>
</html>