Tell us what’s happening:
The checkbox displays a checkmark when checked using CSS, and all other tests pass. However, the automated test still reports that the checkmark is missing. This appears to be a problem with the test rather than the implementation.
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">
Dark Mode
</label>
<label class="feature-card">
<input type="checkbox">
Notifications
</label>
<label class="feature-card">
<input type="checkbox">
Auto Save
</label>
</div>
</body>
</html>
/* file: styles.css */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f5f5;
padding:40px;
}
h1{
text-align:center;
margin-bottom:30px;
}
.feature-card-container{
width:400px;
margin:auto;
}
.feature-card{
display:flex;
align-items:center;
gap:15px;
padding:16px;
margin-bottom:15px;
background:#fff;
border-radius:12px;
box-shadow:0 2px 10px rgba(0,0,0,.15);
cursor:pointer;
}
input[type="checkbox"]{
appearance:none;
-webkit-appearance:none;
width:24px;
height:24px;
border:2px solid #444;
border-radius:4px;
display:flex;
justify-content:center;
align-items:center;
}
input[type="checkbox"]::before{
content:"✓";
font-size:18px;
color:#fff;
transform:scale(0);
transition:.2s;
}
input[type="checkbox"]:checked{
background:#2563eb;
border-color:#2563eb;
}
input[type="checkbox"]:checked::before{
transform:scale(1);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 OPR/133.0.0.0
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page