-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathform_element.html
More file actions
94 lines (92 loc) · 4.55 KB
/
form_element.html
File metadata and controls
94 lines (92 loc) · 4.55 KB
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>表单元素自定义样式</title>
<link rel="stylesheet" href="assets/style/base.css">
<link rel="stylesheet" href="assets/style/form_element.css">
</head>
<body>
<div class="main-wrap">
<div class="header">表单元素自定义样式</div>
<div class="card">
<div class="card-header">input-range</div>
<div class="card-content">
<input type="range" class="rgb">
<input type="range" class="alpha">
</div>
</div>
<div class="card">
<div class="card-header">input-date</div>
<div class="card-content">
<input type="date">
</div>
</div>
<div class="card">
<div class="card-header">input-color</div>
<div class="card-content">
<input type="color">
</div>
</div>
<div class="card">
<div class="card-header">input-file</div>
<div class="card-content">
<p>
<a href="javascript:;" class="file">选择文件
<input type="file">
<svg width="20px" height="20px" viewBox="0 0 1024 1024">
<path fill="#1E88C7" d="M82.2272 382.473309l14.6432 0L96.8704 136.229236c0-19.781818 16.477091-35.802764 35.923782-35.802764l1.145018 0 239.141236 0c10.966109 0 21.047855 5.157236 27.675927 12.939636L527.080727 247.919709l363.641018 0c19.6608 0 35.691055 16.235055 35.691055 36.0448l0 1.033309 0 97.4848 15.090036 0c19.688727 0 35.9424 16.030255 35.9424 35.597964 0 2.504145-0.465455 4.338036-0.912291 6.0416l-50.362182 467.428073c-1.591855 18.301673-17.389382 32.032582-35.458327 32.032582L132.794182 923.582836c-19.009164 0-35.011491-14.996945-35.923782-34.331927L46.740945 422.074182c-2.066618-19.241891 12.111127-37.301527 31.799855-39.042327l3.677091 0L82.217891 382.473309 82.2272 382.473309zM168.485236 382.473309 168.485236 382.473309l686.768873 0L855.254109 319.767273 511.525236 319.767273c-9.392873 0-18.767127-3.770182-25.637236-11.431564l-128.372364-136.266473L168.485236 172.069236 168.485236 382.473309 168.485236 382.473309zM901.697164 454.106764 901.697164 454.106764l-10.053818 0-0.912291 0-0.940218 0L132.794182 454.106764l-0.707491 0-9.811782 0 42.551855 398.066036 694.076509 0L901.697164 454.106764 901.697164 454.106764z" />
</svg>
</a>
<span>未选择任何文件</span>
</p>
<p><input type="file"></p>
</div>
</div>
<div class="card">
<div class="card-header">input-checkbox</div>
<div class="card-content">
<a href="javascript:;" class="checkbox">
<input type="checkbox">
<svg class="check" viewBox="0 0 1024 1024" width="20" height="20">
<path fill="#1E88C7" d="M859.161 74l-694.32 0c-56.82 0-102.839 46.02-102.839 102.841l0 694.26c0 56.82 46.02 102.9 102.841 102.9l694.32 0c56.82 0 102.841-46.08 102.841-102.9l0-694.26c0-56.82-46.02-102.841-102.841-102.841zM917.001 877.58c0 28.32-23.161 51.42-51.36 51.42l-707.22 0c-28.32 0-51.42-23.161-51.42-51.42l0-707.159c0-28.26 23.161-51.42 51.42-51.42l707.159 0c28.26 0 51.36 23.161 51.36 51.42l0 707.159z" p-id="1489">
</path>
</svg>
<svg class="checked" viewBox="0 0 1024 1024" width="20" height="20">
<path fill="#1E88C7" d="M417.6 575.04l320.704-320.704 92.992 93.056-414.72 418.688-1.92-1.984-2.048 1.984-220.032-224 96-96L417.6 575.04z" p-id="1594"></path>
</svg>
</a>
<input type="checkbox">
</div>
</div>
<div class="card">
<div class="card-header">input-radio</div>
<div class="card-content">
<label class="radio-checked"><input type="radio" name="gender" checked>man</label>
<label><input type="radio" name="gender">woman</label>
</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$().ready(function () {
$('.file input').change(function () {
var fileName = $(this).val().split('\\');
$(this).parents('.file').siblings('span').text(fileName[fileName.length-1]);
});
$('.checkbox').click(function () {
$(this).toggleClass('active');
$(this).find('input').prop('checked')?$(this).find('input').removeProp('checked'):$(this).find('input').prop('checked','checked');
});
$('label').click(function () {
if($(this).not('radio-checked')){
$(this).addClass('radio-checked').siblings().removeClass('radio-checked');
$(this).find('input[type="radio"]').prop('checked','checked');
$(this).siblings().find('input[type="radio"]').removeProp('checked');
}
});
});
</script>
</body>
</html>