告诉我们发生了什么:
Design a Feature Selection Page篇章中我明明已经更改了checkbox的选中状态的背景颜色,无论是background还是background-color都不行
到目前为止你的代码
<!-- 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">
<label class="feature-card">文本1<input type="checkbox"></label>
<label class="feature-card">文本2<input type="checkbox"></label>
<label class="feature-card">文本3<input type="checkbox"></label>
<label class="feature-card">文本4<input type="checkbox"></label>
</div>
</body>
</html>
/* file: styles.css */
input[type=checkbox]{
appearance:none;
border:2px solid #aaa;
width:20px;
height:20px;
border-radius:4px;
vertical-align:middle;
position:absolute;
right:8px;
top:8px;
transition:all 0.3s ease;
cursor: pointer;
}
label{
position:relative;
cursor: pointer;
display:inline-block;
width:40vw;
background:white;
height:100px;
margin:0.5em;
line-height:100px;
box-shadow:0 0 8px rgba(0,0,0,0.3);
border-radius:10px;
transition:all 0.3s ease;
}
body{
padding:15px;
text-align:center;
background:whitesmoke;
}
input[type="checkbox"]:checked{
background-color:#ff0000;
border-color:#666;
text-align:center;
vertical-align:middle;
}
label:hover{
box-shadow:0 0 6px 3px rgba(230,230,40);
}
input[type="checkbox"]:checked::after{
content:"✓";
font-weight:bold;
color:white;
}
你的浏览器信息:
用户代理是: 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
挑战信息:
Design a Feature Selection Page - 设计一个特征选择页面