有了一点CSS3的你其实可以做一些关于它很酷的东西。
HTML
Check Box 1
Check Box 2
CSS
div {
width:110px;
height:50px;
padding:20px;
background:#40464b;
border-radius:6px;
}
input[type=”checkbox”] {
display:none;
}
input[type=”checkbox”] + label {
color:#f2f2f2;
font-family:Arial, sans-serif;
font-size:14px;
line-height: 25px;
}
input[type=”checkbox”] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}
input[disabled] + label span {
display:inline-block;
width:16px;
height:16px;
margin:-1px 6px 0 0;
vertical-align:middle;
background:#ccc left top no-repeat;
border-radius: 3px;
-moz-box-shadow: inset 0 0 2px #000;
-webkit-box-shadow: inset 0 0 2px#000;
box-shadow: inner 0 0 5px #888;
cursor:pointer;
}
input[type=”checkbox”]:checked + label span {
background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat;
}