2013年3月23日星期六

【转】CSS定义Input之Radio和Checkbox的样式

<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>

注,背景图片应为上下排列  


摘自:http://hi.baidu.com/jiuyuefenglin/item/7e01f4f2e91ae1da6225d24a

1 条评论: