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

**URL:** <https://forum.freecodecamp.org/t/design-a-feature-selection-page/789159>\
**Category:** General\
**Tags:** chinese-中文\
**Created:** [May 18, 2026, 3:33am UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page/789159 "2026-05-18T03:33:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![yejinzhao2004](https://avatars.discourse-cdn.com/v4/letter/y/91b2a8/32.png) [@yejinzhao2004](https://forum.freecodecamp.org/u/yejinzhao2004)\
**Post date:** [May 18, 2026, 3:33am UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page/789159/1 "2026-05-18T03:33:22Z")

</div>

### 告诉我们发生了什么：

Design a Feature Selection Page 篇章中我明明已经将checkbox的选中状态的背景颜色改了但是依旧提示我没有更改成功

### 到目前为止你的代码

```html
<!-- 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>

```

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

> **[freeCodeCamp.org](https://www.freecodecamp.org/chinese/learn/responsive-web-design-v9/lab-feature-selection/design-a-feature-selection-page)**
>
> 免费学习编程

GitHub Link: [i18n-curriculum/curriculum/challenges/chinese/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md at main · freeCodeCamp/i18n-curriculum · GitHub](https://github.com/freeCodeCamp/i18n-curriculum/blob/main/curriculum/challenges/chinese/blocks/lab-feature-selection/68ce56d54d3cad1149a1c4cf.md)

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [May 18, 2026, 2:27pm UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page/789159/2 "2026-05-18T14:27:20Z")

</div>

> [@yejinzhao2004](#):
>
> ` transition:all 0.3s ease;`

try removing the `transition` property

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 15, 2026, 2:27pm UTC](https://forum.freecodecamp.org/t/design-a-feature-selection-page/789159/3 "2026-06-15T14:27:45Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.