input checkbox默认样式修改

            input[type='checkbox'] {
                -webkit-appearance: none;
                vertical-align: middle;
                margin-top: 0;
                background: #fff;
                border: #999 solid 1px;
                border-radius: 50%;
                min-height: 12px;
                min-width: 12px;
                position: relative;
                cursor: pointer;
            }
            input[type='checkbox']:checked {
                background: #409eff;
                border: none;
            }
            input[type='checkbox']:checked::after {
                content: '';
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                position: absolute;
                background: transparent;
                border: #fff solid 1px;
                border-top: none;
                border-right: none;
                height: 4px;
                width: 8px;
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
            }

你可能感兴趣的:(html,css,css3)