css3怎么做复选框

CSS3是一种非常强大的样式语言，它可以用来为网页添加各种效果，包括制作复选框。下面我们来学习一下如何使用CSS3制作复选框。

<html>
  <head>
    <style>
      /* 隐藏原始的复选框 */
      input[type="checkBox"] {
        display: none;
      }
      
      /* 自定义复选框的样式 */
      .checkBox {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 4px;
        position: relative;
      }
      
      /* 复选框选中时的样式 */
      .checkBox:checked::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #000;
      }
    </style>
  </head>
  
  <body>
    <label class="checkBox-label">
      <input type="checkBox" class="checkBox-input">
      <span class="checkBox"></span>
      复选框
    </label>
  </body>
</html>

css3怎么做复选框

上面的代码中，我们首先使用了display: none样式来隐藏原始的复选框。然后，我们自定义了一个名为.checkBox的样式，用来代替原始的复选框。这个样式拥有一些基本属性，如宽度、高度、边框等。

接着，我们使用:checked伪类来定义复选框选中时的样式，这里我们使用了::after伪元素来添加一个小圆圈来表示选中状态。使用position:absolute来让这个小圆圈可以相对复选框居中显示。

最后，我们在HTML中使用了一个label元素来包裹我们的复选框。在label中，我们使用了一个元素来代替原始的复选框，使用元素的for属性来指向这个复选框元素。这样，当用户点击复选框的文字时，也会触发复选框的选中状态。

相关推荐