复选框选中边框正方形 CSS - Html

在网页中，复选框是常用的用于用户选择的控件。如果想要给选择框添加一些样式，可以使用 CSS 实现。下面将介绍如何通过 CSS 实现复选框被选中时显示为边框正方形的效果。

Html 代码

首先，我们需要在 HTML 代码中添加复选框输入控件。如下所示：

<input type="checkbox" class="square-checkbox" id="checkbox-1" name="checkbox-1">
<label for="checkbox-1">复选框 1</label>

以上代码将创建一个复选框和一个标签，标签用于显示复选框的文本。注意，复选框的 class 被设置为 square-checkbox，这是为了在 CSS 样式中方便引用。

CSS 代码

接下来，我们需要在 CSS 中为复选框添加样式。按照以下步骤进行：

1. 隐藏原有的选中状态图标：

   .square-checkbox:checked + label:before {
     content: none;
   }
   

2. 定义选中状态的样式：

   .square-checkbox:checked + label:after {
     content: "";
     display: block;
     width: 16px;
     height: 16px;
     border: 1px solid #000;
   }
   

以上代码将会在复选框被选中时添加一个可以看到的边框正方形。

完整代码

<input type="checkbox" class="square-checkbox" id="checkbox-1" name="checkbox-1">
<label for="checkbox-1">复选框 1</label>

<style>
  .square-checkbox:checked + label:before {
    content: none;
  }
  
  .square-checkbox:checked + label:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
  }
</style>

以上就是在复选框被选中时显示边框正方形的示例代码。可以根据需要进行修改，实现自己想要的效果。