如圖所示，
效果是這樣的。
一下代碼有注釋，思路，一看即可。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>純Css改變復選框樣式-----</title> <style type="text/css"> /*首先第一步就是隱藏原來的復選框*/ .regular-checkbox { display: none; } /*第二部定義現在復選框樣式*/ .regular-checkbox + label { position: relative; display: inline-block; /*lable是內聯元素所以需要加inline-block*/ padding: 7px; /*設置復選框大小*/ background-color: #fafafa; /*設置背景顏色*/ border-radius: 3px; /*復選框border*/ border: 1px solid #CACACA; box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*創建的陰影效果 這里需要了解box-shadow的屬性，前三個值分別是 陰影離開橫方向的距離 :offset-x 陰影離開縱方向的距離 ：offset-y 陰影的模糊半徑： 陰影的顏色 ： */ } /*第三部分做一個active的效果*/ .regular-checkbox + label:active, .regular-checkbox + label:checked + label:active { box-shadow: 0 1px 3px rgba(0,0,0,0.05); } /*選中之后的樣式*/ .regular-checkbox:checked + label { background-color: #E9ECEE; box-shadow: 0 1px 2px rgba(0,0,0,0.05); } /*選中后的效果*/ .regular-checkbox:checked + label:after { content: '\2714'; /*這是一個對勾*/ position: absolute; font-size: 12px; /*設置對勾的大小*/ top: 0px; left: 2px; /*設置位置的偏向*/ color: #009900; /*設置顏色綠色*/ font-weight: bold; /*設置對勾的粗細*/ } </style> </head> <body> <input type="checkbox" id="check" class="regular-checkbox" /><label for="check"></label> </body> </html>