css实现radio选中效果html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span-css模拟radio</title>
<style type="text/css">
#wrap{
width: 500px;
height: 500px;
margin: 50px auto;
}
label input{
display: none;
}
label span{
html radio选中事件display: inline-block;
width: 20px;
height: 20px;
background: url(../img/radio.png) no-repeat 0 0;
background-position: -55px -5px;
}
label input:checked+span{
background-position: -5px -5px;
}
</style>
</head>
<body>
<div id="wrap">
<label>
<input type="radio" value="meal" name="sex">
<span></span>
</label>
<label>
<input type="radio" value="femeal" name="sex">
<span></span>
</label>
</div>
</body>
</html>

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。