使用 CSS 拉伸之前的复选框

在 HTML 中，复选框是一种常见的表单元素，它允许用户在一组选项中进行多个选择。然而，在一些情况下，我们可能需要将复选框进行美化，以增强用户体验。这时，可以使用 CSS 来修改复选框的样式。但在我们修改样式之前，先来看一下复选框的初始样式。

复选框的基本样式

复选框通常由一个正方形的框和一个小勾选标记组成。当复选框被选中时，勾选标记会出现在框的中央。在 HTML 中，复选框的代码如下所示：

<input type="checkbox" id="myCheckbox" name="myCheckbox" value="1">
<label for="myCheckbox">Checkbox</label>

在上述代码中，我们定义了一个 input 元素，type 属性设置为 checkbox，表示这是一个复选框；id 和 name 属性分别设置为 myCheckbox，用来标识这个复选框；value 属性设置为 1，表示当这个复选框被选中时，向服务器提交的值为 1；紧随其后的是一个 label 元素，它的 for 属性指向了 input 的 id，表示这个 label 是和 input 相关联的。

复选框的基本样式通常是无法满足我们的需求的，我们需要使用 CSS 来增加一些样式。

修改复选框的样式

我们可以利用 :checked 和 ::before 伪元素来修改复选框的样式。

首先，我们需要隐藏原有的复选框，代码如下所示：

input[type="checkbox"] {
   display: none;
}

接着，我们添加一些样式，如下所示：

input[type="checkbox"] + label::before {
  content: "";
  display: inline-block;
  border: 2px solid grey;
  width: 12px;
  height: 12px;
  margin-right: 10px;
}
input[type="checkbox"]:checked + label::before {
  content: "\2713";
  color: white;
  background-color: grey;
  text-align: center;
  line-height: 12px;
}

在上述样式中，我们首先利用 ::before 伪元素添加了一个正方形的框，设置了宽度、高度、边框样式和颜色等属性。接着，当复选框被选中时，利用 content 属性添加了一个 "✓" 的勾选标记，并同时改变了色彩和背景颜色等属性。

最终效果如下图所示:

在本文中，我们介绍了如何使用 CSS 来增加复选框的样式。在实际应用中，我们可以根据具体的需求，修改样式和属性，以满足用户体验的要求。