1. 程式人生 > >CSS - 利用偽元素修改checkbox樣式

CSS - 利用偽元素修改checkbox樣式

<div class="label_rem">
	<input type="checkbox" name="moren" id="checkbox_aa" class="remember" />
	<label for="checkbox_aa"></label><span>自定義按鈕</span>
</div>
.label_rem .remember {
   display: none;
   /*隱藏複選框*/
}

.label_rem .remember:checked+label {
   background-color
: #ecf2f7; border: 1px solid #92a1ac; color: #000; cursor: pointer; } .label_rem .remember+label { /*新增複選框樣式*/ background-color: #FFF; border: 1px solid #C1CACA; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 9px; display: inline-block; position
: relative; margin: 0; cursor: pointer; } .label_rem .remember:checked+label:after { /*打勾的圖示 可新增圖示*/ content: '\2714'; position: absolute; top: -8px; left: 0px; color: #000; width: 100%; text-align: center; font-size: 1.4em; padding: 1px 0 0 0; vertical-align: text-top; }

自定義按鈕效果圖