css复选单选框没边框

CSS中的复选框和单选框有时候会出现没有边框的情况。下面将介绍如何通过CSS添加边框，使其看起来更加美观。

    input[type="checkBox"],input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 4px;
        outline: none;
        display: inline-block;
        position: relative;
        user-select: none;
    }
    input[type="checkBox"]:checked::after {
        content: "\2713";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 14px;
    }
    input[type="radio"]:checked::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #666;
    }

在上面的代码中，我使用了appearance属性将默认的样式去掉，并添加一些样式来美化它们。其中，border和padding分别控制边框和内边距大小，border-radius控制边框圆角，outline为获得焦点时的样式。通过使用::after和::before伪元素来创建选中后的样式，其中单选框使用before伪元素使得选中时有一个圆圈。

你也可以根据你的需要修改样式，比如改变边框颜色、选择图标样式等。