CSS實現(xiàn)綠色打鉤

/* 定義一個矩形框 */
.checkbox {
display: inline-block;  /* 塊級元素變成內(nèi)聯(lián)元素 */
position: relative;     /* 定位需要使用 */
width: 18px;            /* 矩形框?qū)挾?*/
height: 18px;           /* 矩形框高度 */
border: 2px solid #ccc; /* 矩形框邊框 */
border-radius: 4px;     /* 矩形框圓角 */
}
/* 定義打鉤圖案 */
.checkbox::before {
content: "\2713";         /* unicode編碼的打鉤圖案 */
position: absolute;       /* 定位 */
top: -2px;                /* 向上移動2px */
left: 2px;                /* 向右移動2px */
font-size: 18px;          /* 打鉤大小 */
color: #fff;              /* 打鉤顏色 */
background-color: #7AC142; /* 打鉤背景顏色 */
border-radius: 2px;       /* 打鉤圓角 */
padding: 1px;             /* 打鉤填充 */
display: none;            /* 初始隱藏 */
}
/* 定義選中狀態(tài) */
.checkbox:checked::before {
display: block; /* 顯示打鉤圖案 */
}

使用方法：

<input type="checkbox" class="checkbox" checked>

效果圖：