使用CSS调整HTML checkbox大小时如何使其保持左对齐

问题描述 #

我在使用CSS时遇到了问题，具体来说，每当我增大checkbox的宽度，它周围的容器尺寸也会变大，导致其对齐位置偏离页面起始处。很难用文字描述，我会在下方附上图片更详细地说明问题。

这是我期望的对齐效果，仅需要将其放大： #

这是我增大宽度后它的对齐效果： #

重申一下我的需求：增大checkbox的宽度，同时保持它在页面左侧起始位置对齐。需要说明的是，我没有使用Bootstrap等第三方CSS库。目前我尝试过调整margin、text-align、float等CSS属性，但都没有效果，有没有人知道解决方案？

相关代码如下：

input[type=text],
input[type=tel],
select {
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 4px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
}

input[type=text],
input[type=tel],
label {
  color: rgba(0, 0, 0, .8);
  width: 176px;
}

label {
  margin: 5px;
}

input[type=checkbox] {
  height: 20px;
  width: 176px;
}

<!DOCTYPE html>
<html lang="en-US">

<head>
  <title>Learning Jquery</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <h1 class="header">Header</h1>

  <form id="input__form" action="" method="POST">
    <!-- Additional inputs -->
    <label for="input__zip">Zip</label><br />
    <input type="text" id="input__zip" name="input__zip" /><br />
    <label for="input__current__employee">Current Employee</label><br />
    <input type="checkbox" id="input__current__employee" name="input__current__employee" /><br />
    <input type="submit" id="input__submit" name="input__submit" value="submit" />
  </form>

</body>

</html>

解决方案 #

问题原因 #

1. 你的文本输入框设置了margin: 5px，但单独写的input[type=checkbox]规则没有复用这个外边距，两者左侧边距不一致，天然就会有对齐偏差。
2. 原生checkbox控件直接设置width属性时，浏览器默认会把可视的勾选框放在你设置的宽度盒子里居中，不会靠左对齐，所以宽度越大，勾选框往右偏移的距离越远。

方案1：用transform缩放（推荐，兼容性好，改造成本低） #

如果只是要放大checkbox的尺寸，不需要自定义特殊样式，直接修改checkbox的CSS规则即可：

input[type=checkbox] {
  margin: 5px; /* 和其他输入框保持统一的外边距，保证左对齐基准一致 */
  transform: scale(2); /* 缩放倍数可以按需调整，2就是放大到原来的2倍 */
  transform-origin: left center; /* 缩放原点设为左侧中心，放大时不会向左偏移 */
}

这个方案不会改变元素在文档流里的占位大小，也不会破坏原有布局，适配所有现代浏览器。

方案2：自定义checkbox样式（需要特殊宽高/样式时用） #

如果你需要自定义checkbox的宽高比例、样式，那就先清除原生样式，自己实现外观，完全可控：

input[type=checkbox] {
  margin: 5px;
  appearance: none;
  -webkit-appearance: none;
  width: 40px; /* 自定义宽度 */
  height: 20px; /* 自定义高度 */
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
/* 选中状态样式 */
input[type=checkbox]:checked {
  background-color: #1677ff;
}
input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 12px;
  top: 2px;
  width: 8px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

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