css美化checkbox和radio标签

前言

• 有时候可能需要自己来美化一些标签，这里做下记录，方便以后查找。

效果

checkbox标签美化

 input[type=checkbox]:after  {
        content: "";
        display:block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 14px;
        font-size: 16px;
        color: #fff;
        border: 2px solid #ddd;
        background-color: #fff;
        box-sizing:border-box;
    }

    input[type=checkbox]:checked:after  {
        content: '\2714';
        background-color: #5774FF;
    }

radio美化

input[type=radio]:after  {
    content: "";
    display:block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 14px;
    font-size: 16px;
    color: #fff;
    border: 2px solid #ddd;
    background-color: #fff;
    box-sizing:border-box;
    position: relative;
    left: -2px;
}

input[type=radio]:checked:after  {
    content: "";
    transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
    border: 4px solid #5774FF;
}