设计特征选择页面 - 设计一个特征选择页面

Curriculum Help
1

告诉我们发生了什么：

I think the last two tests are wrong, becasue my checkbox input has changed the color, and the test shows it didn’t apply the chosen color;

你目前的代码

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css" />
    <title>Selection Feature Page</title>
</head>

<body>
    <h1>Feature Selection</h1>
    <div class="feature-card-container">
        <label 
        for="check1" class="feature-card">
            <input type="checkbox"
            id="check1"
            value="check1"
            name="check1" />
            No one know
        </label>
        <label 
        for="check2" class="feature-card">
            <input 
            id="check2" 
            name="check2"
            value="check2"
            type="checkbox" />
            what the feature
        </label>
    </div>
</body>

</html>

/* file: styles.css */
.feature-card input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;  
  border: 2px solid #eee;
  border-radius: 4px;
  background-color: white;
  transition: all 0.3s;
  vertical-align: middle;
  margin-right: 15px;
}

.feature-card input[type="checkbox"]:checked::after {
  content: "✓";
  display: block;
  text-align: center;
  font-size:14px;
  color: white;
}

.feature-card input[type='checkbox']:checked {
    background-color: blue;
    border-color: yellow;
}

你的浏览器信息：

用户代理是：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36

挑战信息：

设计特征选择页面 - 设计一个特征选择页面

GitHub 链接：i18n-curriculum/curriculum/challenges/chinese/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/i18n-curriculum · GitHub

2

remove the transition property, when you use it, the tests find the value before the transition