-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest.html
108 lines (108 loc) · 3.45 KB
/
test.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
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>formalize.css test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/necolas/normalize.css/normalize.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/visicode/formalize.css/formalize.css" />
<style>
fieldset {
background-color: lightgrey;
font-size: 30px;
text-align: right;
margin: 50px;
padding: 10px;
}
label {
vertical-align: -2px; /* -padding-top - border-top */
}
form.widths input:not([type="checkbox"]):not([type="radio"]),
form.widths textarea,
form.widths button,
form.widths select {
width: 50%;
}
form.heights input:not([type="checkbox"]):not([type="radio"]),
form.heights button,
form.heights select {
height: 50px;
}
form.heights textarea {
height: 150px;
}
form.paddings input,
form.paddings textarea,
form.paddings button,
form.paddings select {
padding: 6px;
}
form.paddings label {
vertical-align: -7px;
}
#tools {
color: white;
background-color: navy;
left: 0;
top: 0;
padding: 15px;
position: fixed;
}
</style>
</head>
<body>
<form class="sizes">
<fieldset>
Text: <input type="text" placeholder="placeholder" /><br/>
Date (1): <input type="date" /><br/>
DateTime: <input type="datetime" /><br/>
Number: <input type="number" /><br/>
Range: <input type="range" /><br/>
Color (2): <input type="color" /><br/>
File (6): <input type="file" /><br/>
Image (3): <input type="image" /><br/>
Month (1): <input type="month" /><br/>
Password: <input type="password" /><br/>
Tel: <input type="tel" /><br/>
Time (1): <input type="time" /><br/>
URL: <input type="url" /><br/>
Week (4): <input type="week" /><br/>
Search: <input type="search" /><br/>
<input type="checkbox" /> Checkbox<br/>
<input type="radio" /> Radio<br/>
<input type="checkbox" /> <span style="line-height: 75px;">Checkbox</span><br/>
<input type="radio" style="width: 50px; height: 75px;"/> Radio with size (5)<br/>
Combo (1b): <select><option>item</option></select><br/>
<label for="textarea">Textarea:</label> <textarea id="textarea">Textarea</textarea><br/>
Buttons: <button>Button</button><br/>
<input type="button" value="Input button" /><br/>
<input type="submit" /><br/>
<input type="reset" />
</fieldset>
</form>
<div id="tools">
<input id="widths" type="checkbox" /> Fixed widths<br/>
<input id="heights" type="checkbox" /> Fixed heights<br/>
<input id="paddings" type="checkbox" /> Extra paddings
</div>
<div>
<h2>List of known issues</h2>
(1): input is a combo on iPhone: paddings are not allowed -> need to force height<br/>
(1b): input is a combo on Mac: paddings are not allowed -> need to force height<br/>
(2): input has a lower height on Chrome & Firefox -> need to force height<br/>
(3): image input has a lower height on Safari and Firefox when empty<br/>
(4): week input is not recognized on iPhone<br/>
(5): checkbox and radio inputs are not resized on Mac & Firefox<br/>
(6): file input keeps the default focus style on Firefox (2px outline)<br/>
</div>
<script type="text/javascript">
window.addEventListener('load', _ => {
document.querySelectorAll('#tools input[id]').forEach(i => {
i.addEventListener('click', function () {
document.forms[0].classList.toggle(this.id, this.checked);
});
});
});
</script>
</body>
</html>