Tell us what’s happening:
my border color does change when input is checked but it won’'t let me pass. even after removing the transition property.
Your code so far
<!-- file: index.html -->
<!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">
<div class="box-1" >
<label class="feature-card">Fast internet connection<input type="checkbox"/></label></div>
<div class="box-2" >
<label class="feature-card">Multiple device support<input type="checkbox"/></label>
<div>
<div class="box-3" ><label class="feature-card">Wireless connectivity<input type="checkbox"/></label>
</div>
<div class="box-4" ><label class="feature-card">wide range and coverage<input type="checkbox"/></label></div>
</div>
</body>
</html>
/* file: styles.css */
input[type="checkbox"]{
width: 20px;
height: 20px;
cursor:pointer;
appearance: none;
border:2px solid green;
border-radius:10px;
background-color:white;
vertical-align:middle;
}
input[type="checkbox"]:checked::after{
content:"✓";
display:block;
text-align:center;
}
input[type="checkbox"]:checked{
background-color:yellow;
border:green;
}
/*.feature-card-container{
display:inline-block;
box-shadow:0 2px 12px;
padding:30px;
border-radius:10px;
}
input[type="checkbox"]:hover{
border-color:green;
}*/
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36 Edg/148.0.0.0
Challenge Information:
Design a Feature Selection Page - Design a Feature Selection Page