css怎么做打勾方框

CSS是一种用来美化网页的样式语言，可以给网页添加样式效果，比如用CSS来制作打勾方框非常简单。

html:div class="checkbox">
      input type="checkbox" id="agree">
      label for="agree">
    /label>
    /div>
CSS:.checkbox input[type="checkbox"] {
      display: none;
}
.checkbox label {
      display: inline-block;
      position: relative;
      width: 18px;
      height: 18px;
      border: 1px solid #ccc;
      border-radius: 2px;
      margin-right: 5px;
      cursor: pointer;
}
.checkbox label::after {
      content: "";
      display: inline-block;
      width: 7px;
      height: 13px;
      border-width: 0 2px 2px 0;
      border-style: solid;
      border-color: #fff;
      transform: rotate(45deg);
      position: absolute;
      left: 4px;
      top: 3px;
      opacity: 0;
}
.checkbox input[type="checkbox"]:checked+label::after {
      opacity: 1;
}
    

以上代码中，首先将input[type="checkbox"]的display属性设置为none，这样就隐藏了原来的checkbox框。同时用label来代替原来的checkbox，设置一个宽高，并添加边框和圆角属性。使用伪元素label::after来制作打勾符号，然后通过input[type="checkbox"]的:checked伪类来选择被勾选的label，并将其伪元素label::after的opacity设置为1，就实现了打勾。

对于想要制作其他形状的勾选框，也可以按照类似的方法来实现，只需要根据需求修改一些CSS属性即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！