如何用HTML和CSS实现主题按钮右侧的自定义样式复选框？

修改后的 HTML 代码 #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Select a Topic</title>
    <link rel="stylesheet" href="style_landingpage.css">
  </head>
  <body>
    <h1>Select a Topic</h1>
    <label class="topic-label">
      <a href="game.html?topic=movies">
        <button>Movies</button>
      </a>
      <input id="movies-checkbox" class="checkboxid" type="checkbox" name="topic">
      <span class="checkbox-toggle"></span>
    </label>
    <label class="topic-label">
      <a href="game.html?topic=music">
        <button>Music</button>
      </a>
      <input id="music-checkbox" class="checkboxid" type="checkbox" name="topic">
      <span class="checkbox-toggle"></span>
    </label>
    <label class="topic-label">
      <a href="game.html?topic=countries">
        <button>Countries</button>
      </a>
      <input id="countries-checkbox" class="checkboxid" type="checkbox" name="topic">
      <span class="checkbox-toggle"></span>
    </label>
    <a href="game.html?topic=countries">
      <button class="play-btn">Play</button>
    </a>
  </body>
</html>

修改后的 CSS 代码 #

body {
  background-color: black;
  color: white;
  text-align: center;
  font-family: 'Times New Roman', Times, serif;
}

/* 调整主题标签布局，实现按钮与复选框横向排列 */
.topic-label {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

button {
  width: 2in;
  height: 1in;
  background-color: lightblue;
  border: none;
  border-radius: 5px;
  color: black;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
}

.play-btn {
  width: 2in;
  height: 50px;
  background-color: #006400;
  color: #fff;
  border: none;
  padding: 5px;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  display: block;
  margin: 20px auto;
}

/* 隐藏原生复选框，保留交互功能 */
.checkboxid {
  position: absolute;
  opacity: 0;
}

/* 自定义复选框样式：1英寸宽，匹配按钮高度 */
.checkbox-toggle {
  width: 1in;
  height: 1in;
  background-color: white;
  border-radius: 5px;
  margin-left: 15px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

/* 复选框选中时切换为蓝色背景 */
.checkboxid:checked ~ .checkbox-toggle {
  background-color: blue;
}

关键改动说明 #

• HTML结构调整：

  • 给每个主题项的label添加topic-label类，统一控制布局。
  • 将复选框移至按钮右侧，新增checkbox-toggle span作为自定义复选框的可视化载体。
  • 移除输入框上错误的for属性，为每个复选框添加唯一id（便于后续维护）。

• CSS样式调整：

  • 使用flexbox实现按钮与复选框的横向居中对齐。
  • 隐藏原生复选框但保留其点击交互能力，避免原生样式干扰。
  • 自定义复选框尺寸为1英寸宽、1英寸高，默认白色背景，选中时切换为蓝色。
  • 为play-btn恢复块级布局，确保其单独居中显示。

内容的提问来源于stack exchange，提问作者squadwa