超簡單自定義單選框和複選框

在很多時候，瀏覽器自帶的單選框和複選框的樣式不夠美觀，並且瀏覽器的樣式之間帶有差異。已經不足以我們生產的需求。下面用css來自定義修改一下單選框與複選框的樣式。
下面我是分享最簡單的一種搞定自定義設置

效果圖

首先定義需要設計的樣式
 .radio-item .radio {
            width: 15px;
            height: 15px;
            border: 1px solid #999;
            cursor: pointer;
            display: inline-block;
            box-sizing: border-box;
        }
點擊之後的樣式
        .radio-item input:checked+.radio {
            border-color: #008c8c;
        }

        .radio-item input:checked~span {
            color: #008c8c;
        }
設計好外表樣式 然受使用僞類進行設計裏面的的樣式 這個可以自定義設計了
        .radio-item input:checked+.radio::after {
            display: block;
            font-weight: bold;
            font-size: 24px;
            font-family: Sans-serif;
            background: transparent;
            content: "√";
            position: absolute;
            top: 6px;

        }
瀏覽器自帶的樣式可以隱藏掉了
        .radio-item input[type="radio"] {
            display: none;
        }



 <p>
        請選擇性別：
        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>男</span>
        </label>

        <label class="radio-item">
            <input name="gender" type="radio">
            <span class="radio"></span>
            <span>女</span>
        </label>
    </p>

複選框
效果圖

   /* 複選框 */
        .check-item .checkbox {
            display: inline-block;
            width: 14px;
            height: 14px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .check-item input:checked+.checkbox {
            border-color: #00a1d6;
        }

        .check-item input:checked~span {
            color: #00a1d6;
        }

        .check-item input:checked+.checkbox::after {
            content: "";
            display: block;
            width: 7px;
            height: 7px;
            background: #00a1d6;
            border-radius: 2px;
            margin-left: 2.5px;
            margin-top: 2.5px;
        }

        .check-item input[type="checkbox"] {
            display: none;
        }


  <p>
        請選擇自己的興趣還好:
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>籃球</span>
        </label>
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>籃球</span>
        </label>
        <label class="check-item">
            <input type="checkbox" name="habit">
            <span class="checkbox"></span>
            <span>籃球</span>
        </label>
    </p>