css 多项选择框边框变圆

CSS中，多选框（checkbox）是一个常见的元素。默认情况下，多选框的外观可能并不理想，往往需要借助CSS样式来进行美化。我们可以通过设置CSS属性来改变多选框的外观，例如边框颜色、宽度等等。接下来让我们来学习如何将多项选择框的边框变成圆形。

input[type="checkbox"] {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        border-radius: 50%;
     /* 将边框变成圆形 */    border: 2px solid #ccc;
     /* 设置边框的颜色和宽度 */    width: 20px;
     /* 设置宽度 */    height: 20px;
     /* 设置高度 */    outline: none;
     /* 取消选中状态的外边框 */    cursor: pointer;
 /* 设置鼠标样式 */}
input[type="checkbox"]:checked {
        background-color: #333;
     /* 设置选中后的背景颜色 */    border-color: #333;
 /* 设置选中后的边框颜色 */}
    

上述代码中，我们先设置了多选框的样式为none，这样默认的多选框外观就会消失。然后通过border-radius属性将多选框的边框变成了圆形，并设置了边框的颜色和宽度，同时设置了多选框的宽度和高度，使其看起来更加美观。outline属性用于取消选中状态的外边框，避免干扰我们需要的样式。最后，我们通过:checked伪类来设置多选框被选中时的样式，包括背景色和边框颜色。

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