diff options
| author | Elizabeth Hunt <me@liz.coffee> | 2025-12-15 00:12:19 -0800 |
|---|---|---|
| committer | Elizabeth Hunt <me@liz.coffee> | 2025-12-15 00:12:19 -0800 |
| commit | 4c3b19b78230873ab067d5235124b1587543aa3e (patch) | |
| tree | bba6e52fc739ff7e266814b16d9e257bbdbf00ab /src | |
| parent | bb346387d4b279189fc106d37369cc1d73c4ca3d (diff) | |
| download | adelie-4c3b19b78230873ab067d5235124b1587543aa3e.tar.gz adelie-4c3b19b78230873ab067d5235124b1587543aa3e.zip | |
Add file input
Diffstat (limited to 'src')
| -rw-r--r-- | src/css/style.css | 40 | ||||
| -rw-r--r-- | src/index.html | 16 |
2 files changed, 56 insertions, 0 deletions
diff --git a/src/css/style.css b/src/css/style.css index 3f8e8f5..e5aee32 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -919,6 +919,46 @@ input[type="range"]::-moz-range-progress { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(0, 0, 0, 0.3); } +/* file inputs */ + +input[type="file"] { + display: none; +} + +label.file-input-button { + display: inline-block; + font-family: var(--font-mono); + font-weight: 700; + padding: var(--space-xs) var(--space-sm); + border: 2px outset var(--border-light); + background: var(--surface); + color: var(--fg); + font-size: 0.875rem; + box-shadow: inset 1px 1px 0 var(--highlight), inset -1px -1px 0 var(--lowlight), 2px 2px 0 + rgba(0, 0, 0, 0.18); + transition: transform 0.05s, box-shadow 0.05s, background 0.1s; + user-select: none; + width: 100%; + text-align: center; + box-sizing: border-box; + margin-top: var(--space-xs); +} + +label.file-input-button:hover { + background: var(--surface-alt); +} + +label.file-input-button:active { + transform: translate(1px, 1px); + border-style: inset; + box-shadow: inset 1px 1px 0 var(--lowlight), inset -1px -1px 0 var(--highlight); +} + +input[type="file"]:focus-visible + label.file-input-button { + outline: 1px dotted var(--fg); + outline-offset: 2px; +} + fieldset { border: 2px solid var(--border-light); padding: var(--space-md); diff --git a/src/index.html b/src/index.html index 7af4350..5deda56 100644 --- a/src/index.html +++ b/src/index.html @@ -213,6 +213,22 @@ </div> </fieldset> + <div class="form-group"> + <label for="file-single">Choose File</label> + <input type="file" id="file-single" /> + <label for="file-single" class="file-input-button"> + Browse Files + </label> + </div> + + <div class="form-group"> + <label for="file-multiple">Choose Files (Multiple)</label> + <input type="file" id="file-multiple" multiple /> + <label for="file-multiple" class="file-input-button"> + Browse Multiple Files + </label> + </div> + <div class="button-row mt-md"> <button type="submit" class="primary">Submit</button> <button type="reset" class="secondary">Reset</button> |