-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathradio.html
33 lines (32 loc) · 1.3 KB
/
radio.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选框</title>
<style>
form{width: 300px;padding: 20px;margin: 30px auto;border: 1px solid #cccccc;}
.wrapper{margin-bottom: 20px;}
.box{display: inline-block;position: relative;width: 16px;height: 16px;background-color: orange;-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;}
.box input{position: absolute; left: -5px;top: -3px;width: 17px;height: 17px;opacity: 0;z-index: 2;cursor:pointer;}
input[type="radio"] + span{display: block;position: absolute;left: 4px; top: 4px;width: 8px;height: 8px;-webkit-border-radius: 4px;-moz-border-radius: 4px; -o-border-radius:4px; border-radius: 4px;background-color: #ffffff;z-index:1;}
input[type="radio"] + span{opacity: 0;}
input[type="radio"]:checked + span{opacity: 1;}
</style>
</head>
<body>
<form action="#">
<div class="wrapper">
<div class="box">
<input type="radio" checked id="ck" name="ss" /><span></span>
</div>
<label for="ck">选择1</label>
</div>
<div class="wrapper">
<div class="box">
<input type="radio" id="ck2" name="ss" /><span></span>
</div>
<label for="ck2">选择2</label>
</div>
</form>
</body>
</html>