如何让HTML复选框单独换行显示并放大checkbox输入控件尺寸

首先修正原有HTML的语法问题 #

你的原始代码存在3个会导致样式失效的基础语法错误：

• <input> 是自闭合标签，不存在</input>闭合写法，选项文本不能放在input标签内部
• label标签不能嵌套其他label标签，不符合HTML语义规范
• 复选框没有和对应选项文本做关联，点击文本无法触发选中，也不利于样式控制

修正后的基础HTML结构如下：

<!-- 问卷标题部分 -->
<p>What would you like to see improved? <span class="optional">(Check all that apply)</span></p>
<!-- 复选框选项部分 -->
<label class="checkbox-item">
  <input value="1" type="checkbox">
  Front-end Projects
</label>
<label class="checkbox-item">
  <input value="2" type="checkbox">
  Back-end Projects
</label>
<label class="checkbox-item">
  <input value="3" type="checkbox">
  Data Visualization
</label>
<label class="checkbox-item">
  <input value="4" type="checkbox">
  Challenges
</label>
<label class="checkbox-item">
  <input value="5" type="checkbox">
  Open Source Community
</label>
<label class="checkbox-item">
  <input value="6" type="checkbox">
  Gitter help rooms
</label>
<label class="checkbox-item">
  <input value="7" type="checkbox">
  Videos
</label>
<label class="checkbox-item">
  <input value="10" type="checkbox">
  City Meetups
</label>
<label class="checkbox-item">
  <input value="11" type="checkbox">
  Wiki
</label>
<label class="checkbox-item">
  <input value="12" type="checkbox">
  Forum
</label>
<label class="checkbox-item">
  <input value="13" type="checkbox">
  Additional Courses
</label>

实现每个复选框单独占一行 #

给每个包裹复选框的.checkbox-item类设置块级显示属性即可，块级元素默认会独占整行，还可以按需添加外边距调整选项之间的间距：

.checkbox-item {
  display: block;
  margin: 10px 0; /* 调整选项上下间距，数值按需修改 */
  cursor: pointer; /* 鼠标悬浮显示手型，提升交互体验 */
  font-size: 16px;
}

放大复选框控件尺寸 #

不推荐使用transform: scale()的方式放大复选框，这种方式会导致元素占位尺寸和实际显示尺寸不一致，引发布局错位、点击区域偏移的问题。直接给checkbox设置宽高属性即可，同时添加垂直对齐属性避免控件和文字错位，还可以自定义选中主题色适配页面风格：

.checkbox-item input[type="checkbox"] {
  width: 22px; /* 复选框宽度，按需调整大小 */
  height: 22px; /* 复选框高度，和宽度保持一致就是正方形 */
  vertical-align: middle; /* 让复选框和旁边的文字垂直居中对齐 */
  margin-right: 10px; /* 调整复选框和文字的间距 */
  accent-color: #2563eb; /* 可选：自定义复选框选中后的主题色 */
}

效果说明 #

把上述CSS和修正后的HTML结合使用，就能实现两个需求：

• 每个复选框和对应文本单独占据一行，选项间距舒适
• 复选框尺寸可以通过修改宽高值自由调整，不会出现和文字错位、点击区域异常的问题
• 点击选项文本也能正常选中/取消选中复选框，符合表单交互规范

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