修改原生单选框与多选框样式

单选框

原生单选框

不多说下面是代码

input[type=radio]{
        width: 16px;
        height: 16px;
        border: 1px solid #84aff6;
        border-radius: 50%;
        -webkit-appearance: none;
        appearance: none;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    input[type="radio"]:hover {
        border: 1px solid #4e8cf2;
    }
    input[type=radio]:checked {
        background-color: #4e8cf2;
        border: 1px solid #4e8cf2;
    }
    input[type=radio]:after {
        content: " ";
        width: 8px;
        height: 8px;
        background: #fff;
        border-radius: 50%;
    }

效果图：

多选框

原生多选框

不多说下面是代码

input[type=checkbox]{
       width: 16px;
       height: 16px;
       background-color: #fff;
       border: 1px solid #84aff6;
       border-radius: 2px;
       color: #fff;
       text-align: center;
       line-height: 15px;
       -webkit-appearance: none;
       appearance: none;
       outline: none;
   }
   input[type="checkbox"]:hover {
       border: 1px solid #4e8cf2;
   }
   input[type=checkbox]:checked {
       color: #fff;
       background-color: #4e8cf2;
       border: 1px solid #4e8cf2;
   }
   input[type=checkbox]:after {
       content: "\2713";
   }

效果图：