如何为表单中的复选框设置CSS样式并实现文字对齐？

问题根源 #

1. CSS选择器错误：你写的.info_section .info_form form input .checkbox是后代选择器，实际是要选中带checkbox类的input元素，正确写法应为input.checkbox。
2. 结构语义缺失：复选框和同意文本未用<label>关联，既降低了可用性（点击文本无法勾选），也导致对齐困难。

修正后的代码 #

HTML 代码

<form name="submit-to-google-sheet">
  <input type="email" name="Email" placeholder="Introduza o seu E-mail" required>
  <button type="submit" id="register" disabled>Subscrever</button>
  <!-- 用label包裹复选框与文本，优化可用性和对齐逻辑 -->
  <label class="checkbox-wrapper">
    <input class="checkbox" type="checkbox" id="agree" onclick="checkMe()">
    <span>Aceito a <a href="Privacidade.html">Politica de Recolha, processamento e uso de dados pessoais do utilizador.</a></span>
  </label>
</form>
<span id="msg"></span>

CSS 代码

.info_section .info_form form input {
  outline: none;
  width: 100%;
  padding: 5px 10px;
}

.info_section .info_form form button {
  padding: 8px 35px;
  outline: none;
  border: none;
  color: #ffffff;
  background: #171717;
  margin-top: 15px;
  text-transform: uppercase;
}

.info_section .info_form form button:disabled {
  padding: 8px 35px;
  outline: none;
  border: none;
  color: #ffffff;
  background: #888888;
  margin-top: 15px;
  text-transform: uppercase;
}

/* 正确选中带checkbox类的input元素 */
.info_section .info_form form input.checkbox {
  width: auto; /* 取消继承的100%宽度，恢复复选框默认尺寸 */
  margin-right: 8px; /* 与右侧文本保持间距 */
  accent-color: #171717; /* 自定义复选框主题色，可按需调整 */
}

/* 包裹容器实现垂直居中对齐 */
.info_section .info_form form .checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-top: 10px;
  cursor: pointer; /* 鼠标移至文本区域也显示手型，提示可点击 */
}

关键改动说明 #

• 用<label>包裹复选框和文本，点击文本即可触发勾选，提升用户体验。
• 修正CSS选择器，确保样式能精准作用到复选框。
• 取消复选框继承的width:100%，恢复默认显示尺寸。
• 通过flex布局实现复选框与文本的垂直居中对齐。
• 可选：使用accent-color快速修改复选框主题色，无需复杂的自定义样式逻辑。

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