- commit
- 14304bbfbb98ac40d347d11ecc6a1c0da888a15a
- parent
- 99a3284d4ba701a170d5c2967e068dbcdd3a5c82
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2021-03-25 16:12
cleanup demo
Diffstat
| A | demo/demo.css | 17 | +++++++++++++++++ |
| A | demo/index.html | 207 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| D | index.html | 35 | ----------------------------------- |
3 files changed, 224 insertions, 35 deletions
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,17 @@
-1 1 [hidden] {
-1 2 display: none !important;
-1 3 }
-1 4
-1 5 body {
-1 6 max-width: 40em;
-1 7 margin: 0 auto;
-1 8 padding: 1em;
-1 9 }
-1 10
-1 11 select,
-1 12 .select,
-1 13 input {
-1 14 display: block;
-1 15 width: 100%;
-1 16 box-sizing: border-box;
-1 17 }
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,207 @@ -1 1 <!DOCTYPE html> -1 2 <html> -1 3 <head> -1 4 <meta charset="utf-8"> -1 5 <link rel="stylesheet" href="../select.css"> -1 6 <link rel="stylesheet" href="demo.css"> -1 7 </head> -1 8 <body> -1 9 <h2>Single select boxes</h2> -1 10 -1 11 <p>Select can take a regular select box like this…</p> -1 12 <select> -1 13 <optgroup label="Alaskan/Hawaiian Time Zone"> -1 14 <option value="AK">Alaska</option> -1 15 <option value="HI">Hawaii</option> -1 16 </optgroup> -1 17 <optgroup label="Pacific Time Zone"> -1 18 <option value="CA">California</option> -1 19 <option value="NV">Nevada</option> -1 20 <option value="OR">Oregon</option> -1 21 <option value="WA">Washington</option> -1 22 </optgroup> -1 23 <optgroup label="Mountain Time Zone"> -1 24 <option value="AZ">Arizona</option> -1 25 <option value="CO">Colorado</option> -1 26 <option value="ID">Idaho</option> -1 27 <option value="MT">Montana</option> -1 28 <option value="NE">Nebraska</option> -1 29 <option value="NM">New Mexico</option> -1 30 <option value="ND">North Dakota</option> -1 31 <option value="UT">Utah</option> -1 32 <option value="WY">Wyoming</option> -1 33 </optgroup> -1 34 <optgroup label="Central Time Zone"> -1 35 <option value="AL">Alabama</option> -1 36 <option value="AR">Arkansas</option> -1 37 <option value="IL">Illinois</option> -1 38 <option value="IA">Iowa</option> -1 39 <option value="KS">Kansas</option> -1 40 <option value="KY">Kentucky</option> -1 41 <option value="LA">Louisiana</option> -1 42 <option value="MN">Minnesota</option> -1 43 <option value="MS">Mississippi</option> -1 44 <option value="MO">Missouri</option> -1 45 <option value="OK">Oklahoma</option> -1 46 <option value="SD">South Dakota</option> -1 47 <option value="TX">Texas</option> -1 48 <option value="TN">Tennessee</option> -1 49 <option value="WI">Wisconsin</option> -1 50 </optgroup> -1 51 <optgroup label="Eastern Time Zone"> -1 52 <option value="CT">Connecticut</option> -1 53 <option value="DE">Delaware</option> -1 54 <option value="FL">Florida</option> -1 55 <option value="GA">Georgia</option> -1 56 <option value="IN">Indiana</option> -1 57 <option value="ME">Maine</option> -1 58 <option value="MD">Maryland</option> -1 59 <option value="MA">Massachusetts</option> -1 60 <option value="MI">Michigan</option> -1 61 <option value="NH">New Hampshire</option> -1 62 <option value="NJ">New Jersey</option> -1 63 <option value="NY">New York</option> -1 64 <option value="NC">North Carolina</option> -1 65 <option value="OH">Ohio</option> -1 66 <option value="PA">Pennsylvania</option> -1 67 <option value="RI">Rhode Island</option> -1 68 <option value="SC">South Carolina</option> -1 69 <option value="VT">Vermont</option> -1 70 <option value="VA">Virginia</option> -1 71 <option value="WV">West Virginia</option> -1 72 </optgroup> -1 73 </select> -1 74 <p>and turn it into this…</p> -1 75 <select data-select> -1 76 <optgroup label="Alaskan/Hawaiian Time Zone"> -1 77 <option value="AK">Alaska</option> -1 78 <option value="HI">Hawaii</option> -1 79 </optgroup> -1 80 <optgroup label="Pacific Time Zone"> -1 81 <option value="CA">California</option> -1 82 <option value="NV">Nevada</option> -1 83 <option value="OR">Oregon</option> -1 84 <option value="WA">Washington</option> -1 85 </optgroup> -1 86 <optgroup label="Mountain Time Zone"> -1 87 <option value="AZ">Arizona</option> -1 88 <option value="CO">Colorado</option> -1 89 <option value="ID">Idaho</option> -1 90 <option value="MT">Montana</option> -1 91 <option value="NE">Nebraska</option> -1 92 <option value="NM">New Mexico</option> -1 93 <option value="ND">North Dakota</option> -1 94 <option value="UT">Utah</option> -1 95 <option value="WY">Wyoming</option> -1 96 </optgroup> -1 97 <optgroup label="Central Time Zone"> -1 98 <option value="AL">Alabama</option> -1 99 <option value="AR">Arkansas</option> -1 100 <option value="IL">Illinois</option> -1 101 <option value="IA">Iowa</option> -1 102 <option value="KS">Kansas</option> -1 103 <option value="KY">Kentucky</option> -1 104 <option value="LA">Louisiana</option> -1 105 <option value="MN">Minnesota</option> -1 106 <option value="MS">Mississippi</option> -1 107 <option value="MO">Missouri</option> -1 108 <option value="OK">Oklahoma</option> -1 109 <option value="SD">South Dakota</option> -1 110 <option value="TX">Texas</option> -1 111 <option value="TN">Tennessee</option> -1 112 <option value="WI">Wisconsin</option> -1 113 </optgroup> -1 114 <optgroup label="Eastern Time Zone"> -1 115 <option value="CT">Connecticut</option> -1 116 <option value="DE">Delaware</option> -1 117 <option value="FL">Florida</option> -1 118 <option value="GA">Georgia</option> -1 119 <option value="IN">Indiana</option> -1 120 <option value="ME">Maine</option> -1 121 <option value="MD">Maryland</option> -1 122 <option value="MA">Massachusetts</option> -1 123 <option value="MI">Michigan</option> -1 124 <option value="NH">New Hampshire</option> -1 125 <option value="NJ">New Jersey</option> -1 126 <option value="NY">New York</option> -1 127 <option value="NC">North Carolina</option> -1 128 <option value="OH">Ohio</option> -1 129 <option value="PA">Pennsylvania</option> -1 130 <option value="RI">Rhode Island</option> -1 131 <option value="SC">South Carolina</option> -1 132 <option value="VT">Vermont</option> -1 133 <option value="VA">Virginia</option> -1 134 <option value="WV">West Virginia</option> -1 135 </optgroup> -1 136 </select> -1 137 -1 138 <h2>Multi-select boxes (pillbox)</h2> -1 139 -1 140 <p>Select also supports multi-value select boxes. The select below is declared with the <code>multiple</code> attribute.</p> -1 141 -1 142 <select multiple data-select> -1 143 <optgroup label="Alaskan/Hawaiian Time Zone"> -1 144 <option value="AK">Alaska</option> -1 145 <option value="HI">Hawaii</option> -1 146 </optgroup> -1 147 <optgroup label="Pacific Time Zone"> -1 148 <option value="CA">California</option> -1 149 <option value="NV">Nevada</option> -1 150 <option value="OR">Oregon</option> -1 151 <option value="WA">Washington</option> -1 152 </optgroup> -1 153 <optgroup label="Mountain Time Zone"> -1 154 <option value="AZ">Arizona</option> -1 155 <option value="CO">Colorado</option> -1 156 <option value="ID">Idaho</option> -1 157 <option value="MT">Montana</option> -1 158 <option value="NE">Nebraska</option> -1 159 <option value="NM">New Mexico</option> -1 160 <option value="ND">North Dakota</option> -1 161 <option value="UT">Utah</option> -1 162 <option value="WY">Wyoming</option> -1 163 </optgroup> -1 164 <optgroup label="Central Time Zone"> -1 165 <option value="AL">Alabama</option> -1 166 <option value="AR">Arkansas</option> -1 167 <option value="IL">Illinois</option> -1 168 <option value="IA">Iowa</option> -1 169 <option value="KS">Kansas</option> -1 170 <option value="KY">Kentucky</option> -1 171 <option value="LA">Louisiana</option> -1 172 <option value="MN">Minnesota</option> -1 173 <option value="MS">Mississippi</option> -1 174 <option value="MO">Missouri</option> -1 175 <option value="OK">Oklahoma</option> -1 176 <option value="SD">South Dakota</option> -1 177 <option value="TX">Texas</option> -1 178 <option value="TN">Tennessee</option> -1 179 <option value="WI">Wisconsin</option> -1 180 </optgroup> -1 181 <optgroup label="Eastern Time Zone"> -1 182 <option value="CT">Connecticut</option> -1 183 <option value="DE">Delaware</option> -1 184 <option value="FL">Florida</option> -1 185 <option value="GA">Georgia</option> -1 186 <option value="IN">Indiana</option> -1 187 <option value="ME">Maine</option> -1 188 <option value="MD">Maryland</option> -1 189 <option value="MA">Massachusetts</option> -1 190 <option value="MI">Michigan</option> -1 191 <option value="NH">New Hampshire</option> -1 192 <option value="NJ">New Jersey</option> -1 193 <option value="NY">New York</option> -1 194 <option value="NC">North Carolina</option> -1 195 <option value="OH">Ohio</option> -1 196 <option value="PA">Pennsylvania</option> -1 197 <option value="RI">Rhode Island</option> -1 198 <option value="SC">South Carolina</option> -1 199 <option value="VT">Vermont</option> -1 200 <option value="VA">Virginia</option> -1 201 <option value="WV">West Virginia</option> -1 202 </optgroup> -1 203 </select> -1 204 -1 205 <script src="../select.js" type="module"></script> -1 206 </body> -1 207 </html>
diff --git a/index.html b/index.html
@@ -1,35 +0,0 @@1 -1 <!DOCTYPE html>2 -1 <meta charset="utf-8">3 -14 -1 <form>5 -1 <input type="text"/>6 -1 <select name="select">7 -1 <option></option>8 -1 <option>foo</option>9 -1 <option>bar</option>10 -1 <option>baz</option>11 -1 <option>foo2</option>12 -1 <option>bar2</option>13 -1 <option>baz2</option>14 -1 <option>foo3</option>15 -1 <option>bar3</option>16 -1 <option>baz3</option>17 -1 <option>ffoofoofoofoofoofoofoofoofoofoooo</option>18 -1 </select>19 -1 <input list="foo" type="text"/>20 -1 <datalist id="foo">21 -1 <option>bar</option>22 -1 <option>baz</option>23 -1 <option>foo2</option>24 -1 <option>bar2</option>25 -1 <option>baz2</option>26 -1 <option>foo3</option>27 -1 <option>bar3</option>28 -1 <option>baz3</option>29 -1 <option>ffoofoofoofoofoofoofoofoofoofoooo</option>30 -1 </datalist>31 -1 <button>Submit</button>32 -1 </form>33 -134 -1 <link rel="stylesheet" href="select.css">35 -1 <script src="select.js"></script>