<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>純Css改變復(fù)選框樣式-----</title> <style type="text/css"> /*首先第一步就是隱藏原來的復(fù)選框*/ .regular-checkbox { display: none; } /*第二部定義現(xiàn)在復(fù)選框樣式*/ .regular-checkbox + label { position: relative; display: inline-block; /*lable是內(nèi)聯(lián)元素所以需要加inline-block*/ padding: 7px; /*設(shè)置復(fù)選框大小*/ background-color: #fafafa; /*設(shè)置背景顏色*/ border-radius: 3px; /*復(fù)選框border*/ border: 1px solid #CACACA; box-shadow: 0 1px 3px rgba(0,0,0,0.5); /*創(chuàng)建的陰影效果 這里需要了解box-shadow的屬性，前三個(gè)值分別是 陰影離開橫方向的距離 :offset-x 陰影離開縱方向的距離 ：offset-y 陰影的模糊半徑： 陰影的顏色 ： */ } /*第三部分做一個(gè)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'; /*這是一個(gè)對(duì)勾*/ position: absolute; font-size: 12px; /*設(shè)置對(duì)勾的大小*/ top: 0px; left: 2px; /*設(shè)置位置的偏向*/ color: #009900; /*設(shè)置顏色綠色*/ font-weight: bold; /*設(shè)置對(duì)勾的粗細(xì)*/ } </style></head><body> <input type="checkbox" id="check" class="regular-checkbox" /><label for="check"></label></body></html>
聯(lián)系客服
