然而，仅仅使用css，您就会失去复选框的勾选。
第一个

第一个

试做
第一个

最好和最简单的方法之一是使用CSS剪辑路径属性：
第一个
如果你仍然看到一些尖角，试着减少第一个百分比值，（我在那里用了46%），稍微玩一玩，它肯定会起作用。

这是最简单也是最优的解决方案。将appearance设置为none，然后在选中时使用clip-path。
第一个

• 在css中，你可以玩高度，宽度，边界半径。基本上高度和宽度应该相等，边界半径应该是它们的一半。
• 如果你正在使用bootstrap，你可以使用这个类，并将它添加到你的形状，或者在这种情况下你的复选框类是：圆形外观：borders bootstrap 5

例如，在bootstrap 5中使复选框变为圆形（也适用于v4）：

<div class="form-check">
  <input
  class="form-check-input rounded-circle"
  type="checkbox"
  />
  <label class="form-check-label" for="flexCheck1">
  rounded checkbox
  </label>
</div>

CSS

.checkbox {
      clip-path: circle(46% at 50% 50%);
    }

HTML语言

<input type="checkbox" class="checkbox" />

*无需隐藏默认复选框和创建自定义复选框，只需设置 clip-path，即可轻松实现 * 圆形复选框 。

我认为创建圆角的最好方法是使用border-radius属性。This site有一个很好的复选框集合。例如：

cursor: pointer;
position: absolute;
width: 20px;
height: 20px;
top: 0;
border-radius: 10px;

最后一行(border-radius: 10px)会给予你一个圆角的复选框。