水平复选框 CSS

复选框是一种常见的控件，用于让用户从多个选项中进行选择。在 Web 开发中，可以使用 HTML 的 <input type="checkbox"> 元素来创建复选框。

本文将介绍如何使用 CSS 创建水平复选框，以及如何使用 CSS 样式美化复选框。

创建水平复选框

首先，我们创建一个 HTML 表单，其中包含多个复选框。

<form>
  <label>
    <input type="checkbox" name="option1" value="Option 1"> Option 1
  </label>
  <label>
    <input type="checkbox" name="option2" value="Option 2"> Option 2
  </label>
  <label>
    <input type="checkbox" name="option3" value="Option 3"> Option 3
  </label>
</form>

接着，我们使用 CSS 将这些复选框排列成水平行。

form {
  display: flex;
  flex-direction: row;
}
label {
  margin-right: 0.5em;
}

这里，我们使用 display: flex 将表单元素变成弹性盒子容器，使其子元素可以用 flex 属性来布局。

我们还使用 margin-right 来添加一些间距，使复选框之间不至于太靠近。

现在，我们的复选框看起来就像这样：

美化复选框样式

接下来，我们将使用 CSS 样式来美化复选框。

首先，我们使用 appearance: none; 来隐藏默认的复选框样式。然后，我们使用伪元素 ::before 和 ::after 来添加自定义的符号样式。

input[type="checkbox"] {
  appearance: none;
}
input[type="checkbox"]::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.2em;
  border: 1px solid #ccc;
  border-radius: 0.2em;
  background-color: white;
}
input[type="checkbox"]:checked::after {
  content: "\\2713";
  display: inline-block;
  font-size: 1.2em;
  color: #008000;
}

这里，我们使用 content 属性来添加一个空的伪元素 ::before，用来模拟出一个空的复选框。

然后，我们使用 border、border-radius、background-color 等属性来设置伪元素 ::before 的样式，使其看起来像是一个真正的复选框。

接着，我们使用 :checked 伪类来添加一个伪元素 ::after，用来显示选中状态下的复选框。

最后，我们使用 content、font-size 和 color 等属性来设置伪元素 ::after 的样式，使其显示为一个勾选标记。

现在，我们的复选框看起来就像这样：

结论

在本文中，我们介绍了如何使用 CSS 创建水平复选框，并使用样式美化复选框。通过掌握这些技巧，我们可以创建出更具有交互性和美观性的表单控件。