CSS定义Radio单选项和Checkbox复选框样式

完全使用css来实例

<style type=”text/css”>
form#form1 {font:12px tahoma,sans-serif}
input[type="checkbox"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="checkbox"]+label {background:url(checkstyle.gif) no-repeat;padding-left:18px;color:#ccc;}
input[type="checkbox"]+label:hover {color:#369;background-position:0 -16px;}
input[type="checkbox"]:checked+label {color:#000;background-position:0 -48px;}
input[type="checkbox"]:focus+label {color:#963;background-position:0 -32px;}
input[type="radio"] {visibility:hidden;width:0;height:0;margin:0;padding:0;}
input[type="radio"]+label {background:url(checkstyle.gif) no-repeat 0 -64px;padding-left:18px;color:#ccc;}
input[type="radio"]+label:hover {color:#369;background-position:0 -80px;}
input[type="radio"]:checked+label {color:#000;background-position:0 -112px;}
input[type="radio"]:focus+label {color:#963;background-position:0 -96px;}
</style>

发表评论

邮箱地址不会被公开。 必填项已用*标注