css重写单选框复选框样式

用css写单选框/复选框的样式

.rewrite-checkbox:checked {

    background:#1B7E5A

}

.rewrite-checkbox {

    margin-top: 0 !important;

    margin-right: 2px !important;

    width:25px;

    height:25px;

    background-color:#ffffff;

    border:solid 1px #dddddd;

    font-size:0.8rem;

    margin:0;

    padding:0;

    position:relative;

    display:inline-block;

    vertical-align:top;

    cursor:default;

    -webkit-appearance:none;

    -webkit-user-select:none;

    user-select:none;

    -webkit-transition:background-color ease 0.1s;

    transition:background-color ease 0.1s;

}

.rewrite-checkbox:checked::after {

    content:'';

    top:6px;

    left:6px;

    position:absolute;

    background:transparent;

    border:#fff solid 2px;

    border-top:none;

    border-right:none;

    height:6px;

    width:10px;

    -moz-transform:rotate(-45deg);

    -ms-transform:rotate(-45deg);

    -webkit-transform:rotate(-45deg);

    transform:rotate(-45deg);

}

单选框加上下面的样式：

.rewrite-checkbox-radio{

    -webkit-border-radius:50%;

    border-radius:50%;

}

在页面中只需要加上class就可以了