单选按钮和多选按钮的样式设置

来源:转载

以下代码IE9以上执行没有问题:

1、css中样式设置:

/*父元素div*/.choice{position: relative;}/*label*/.choice .radio{position: relative;display: inline-block;padding-left: 25px;cursor: pointer;}/*label input*/.choice .radio input{position: absolute;left:-2000px;}.choice .radio i{display: block;position: absolute;top: 0;left: 0;width: 15px;height: 15px;outline: 0;/*未选中 i border*/border: 1px solid #47a8c0;/*未选中 i 背景*/background: #9cd9e8;border-radius: 50%;transition: border-color .3s-webkit-transition: border-color .3s;} /*给与input标签相邻的i标签设置伪元素*/.choice .radio input+i::after{position: absolute;content: '';top: 3px;left: 3px;width: 9px;height: 9px;border-radius: 50%;/*设置input被选中后,i::after的背景色,不过这时opacity:0,见下一句代码*/background-color: #47a8c0;opacity: 0;/*给i::after元素的opacity属性设置过渡*/transition: opacity .1s;-webkit-transition: opacity .1s;}/*input radio被选中后,给它相邻的i::after 设置样式*/.choice .radio input:checked+i::after{opacity: 1;}/*多选按钮样式设置*/.select{position:relative;}.select .checkbox{position: relative;display: inline-block;padding-left: 25px;cursor: pointer;}/*label input*/.select .checkbox input{position: absolute;left:-2000px;}.select .checkbox i{display: block;position: absolute;top: 0;left: 0;width: 15px;height: 15px;background: url('checkbox_select.png') left top no-repeat;/*IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size*/background-size: cover;/*火狐浏览器*/-moz-background-size:cover;/*chrome和safari*/-webkit-background-size:cover;background-image: url('checkbox_select.png');}.select .checkbox input:checked+i{background: url('checkbox_selected.png') left top no-repeat;/*此处同上*/background-size: cover;}

2、html标签设置

<fieldset><legend>单选按钮和多选按钮的样式设置</legend><div class="choice">您的性别:<label class="radio">男<input type="radio" name="radio" value="1" checked><i></i></label><label class="radio">女<input type="radio" value="2" name="radio"><i></i></label><label class="radio">保密<input type="radio" value="3" name="radio"><i></i></label></div><br /><div class="select">您的爱好:<label for="swimm" class='checkbox'>游泳<input type="checkbox" id='swimm' /><i></i></label><label for="run" class='checkbox'>跑步<input type="checkbox" id='run' /><i></i></label><label for="climb" class='checkbox'>爬山<input type="checkbox" id='climb' /><i></i></label></div></fieldset>


分享给朋友:
您可能感兴趣的文章:
随机阅读: