修改原生CheckBox的样式

input[type=checkbox].my-checkbox {
     margin-right: 5px;
     cursor: pointer;
     font-size: 14px;
     width: 13px;
     height: 14px;
     position: relative;
 }
input[type=checkbox].my-checkbox:after {
    position: absolute;
    width: 13px;
    height: 17px;
    top: 0;
    content: " ";
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 2px;
    border-radius: 3px;
    background:#FFFFFF;
    border:1px solid #DDDDDD;
}

input[type=checkbox].my-checkbox:checked:after {
    content: "✓";
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding-left: 4px;
    background-color: rgb(95, 184, 120);
}
posted @ 2020-05-16 11:15  fight139  阅读(641)  评论(0编辑  收藏  举报