Css改变checkbox的样式

一个复选框：

带文字的：

复选框的颜色，和对勾的颜色都是可以更改的。

html代码结构：

css代码：

 /*#region checkbox样式 */

    span {
        position: relative;
        display: block;
        /*margin: 20px 100px;*/
    }

        span input {
            display: none;
        }

        span label { /*label标签用于Click事件和我们要定义的复选框的方框样式。*/
            padding-left: 25px;
            cursor: pointer;
            position: absolute;
            height: 25px;
            top: 0;
            left: 0;
            /*width: 30px;      如果没有文字，打开这段样式
            background: #eee;
            border: 1px solid #ddd;*/
        }


            /*创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px x 9px的长方形并给他加上边框。
        这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。*/
            span label::after {
                content: '';
                opacity: 0.2; /*设置复选框标签透明度0.2,半透明的对勾 下面悬停时候加深*/
                position: absolute;
                width: 9px;
                height: 5px;
                background: transparent;
                top: 6px;
                left: 7px;
                border: 3px solid #333;
                border-top: none;
                border-right: none;
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

    label:hover::after {
        opacity: 0.5;
    }

    input[type=checkbox]:checked + label:after { /*checkbox选中后，设置相邻元素对勾为不透明*/
        opacity: 1;
    }

    /*#endregion */

单选按钮也一样，设置边框的圆角 border-radius:50%;