CSS更改单选框样式
2018-11-21 本文已影响0人
linqii
默认单选框样式
image.png
更改过后，以图片替代的样式
image.png
代码如下
<!DOCTYPE html >
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>更换单选按钮显示样式</title>
<style>
input[type='radio'].radio {
opacity:0;
display:inline-block;
height:20px;
}
label.radio {
background:url(image/Checkbox-1.png) no-repeat;
height:20px;
padding-left:25px;
}
input[type='radio'].radio:checked + .radio {
background:url(image/Checkbox-3.png) no-repeat;
}
</style>
</head>
<body>
<input type="radio" name="gender" id="x" value="X" checked="checked"><label for="x">1</label><br>
<input type="radio" name="gender" id="y" value="M"><label for="y">2</label><br>
<input type="radio" name="gender" id="z" value="F"><label for="z">3</label><br>
<input type="radio" name="space" id="a" value="1" class="radio" checked="checked"><label for="a" class="radio">1</label><br>
<input type="radio" name="space" id="b" value="2" class="radio"><label for="b" class="radio" >2</label><br>
<input type="radio" name="space" id="c" value="3" class="radio"><label for="c" class="radio" >3</label><br>
</body>
</html>
- tips:
如果要替换的图片较大一点，要设置lable的font-size,字体大才能显示全图片。
