Css改變checkbox的樣式

一個複選框：

帶文字的：

複選框的顏色，和對勾的顏色都是可以更改的。

html代碼結構：

<span><input type="checkbox" id="questionNo" onchange="toggleQuestionNo()"><label for="questionNo"></label></span>

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%;