由于一些系统原生的表单控件在各个浏览器中显示效果不一致,且无法设置某些关键CSS样式,为了保证表单在各浏览器中的兼容性,表单美化就是不得不做的一件事了
单选按钮
【实现效果】
【实现过程】
body{
margin: 0;
font: 16px/20px "宋体";
}
.box{
width: 500px;
height: 100px;
line-height: 100px;
margin: 0 auto;
border: 1px solid black;
text-align: center;
}
.box label{
position:relative;
padding-left: 20px;
}
.box input{
visibility: hidden;
}
.box i{
position: absolute;
top: -2px;
left: -2px;
height: 19px;
width: 19px;
background: url('https://demo.xiaohuochai.site/radiobutton.gif') no-repeat -14px -18px;
}
.box label:hover{
color: red;
}
.box label:hover i{
background-position: -14px -118px;
}
.box label.selected i{
background-position: -14px -218px;
}
<div class="box" id="box">https://demo.xiaohuochai.site
选择一项游戏方式:
<label for="xiu"><i></i>咻一咻</label>
<input id="xiu" type="radio" value="咻一咻">
<label for="yao"><i></i>摇一摇</label>
<input id="yao" type="radio" value="摇一摇">
<label for="niu"><i></i>扭一扭</label>
<input id="niu" type="radio" value&#