Design a Feature Selection Page - 设计一个特征选择页面

告诉我们发生了什么:

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 - 设计一个特征选择页面

GitHub Link: i18n-curriculum/curriculum/challenges/chinese/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/i18n-curriculum · GitHub