漂亮的html单选框,自学篇之-----纯css做的漂亮的单选框复选框样式

checkbook

[id^="checkbox-"] + label {

background-color: #FFF;

padding: 11px 9px;

border-radius: 7px;

display: inline-block;

position: relative;

margin-right: 30px;

background: #F7836D;

width: 88px;

height: 13px;

box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1), 0 0 10px rgba(245, 146, 146, 0.4);

}

[id^="checkbox-"] + label:before {

content: ' ';

position: absolute;

background: #FFF;

top: 0px;

z-index: 99999;

left: 0px;

width: 24px;

color: #FFF;

height: 35px;

border-radius: 7px;

box-shadow: 0 0 1px rgba(0,0,0,0.6);

}

[id^=