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

谁践踏了优雅 2022-07-12 07:26 184阅读 0赞

以下代码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>