对于表单,input[type="radio"的样式总是不那么友好,在不同的浏览器中表现不一。
思路:
-
可以为
-
然后把真正的单选按钮隐藏起来;
-
最后把生成内容美化一下。
<style>
label span {
display: block;
width: 34px;
height: 34px;
background: url(./input.png) 0 0 no-repeat;
}
input[type="checkbox"] {
display: none;
}
label input:checked + span {
display: block;
width: 34px;
height: 34px;
background: url("./input.png") -48px 0 no-repeat;
}
</style>
</head>
<body>
<label for="aaa">
<input type="checkbox" id="aaa">
<span></span>
</label>
效果: