Live Demo
ホバーで枠線が変化します。クリックするとOSのファイル選択画面が開きます。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<label class="tbx-1043"><input type="file" accept="image/*,.pdf" aria-label="ファイルを選択"><span class="tbx-1043__icon" aria-hidden="true">⇧</span><strong>ファイルを選択</strong><small>画像またはPDF</small></label>
CSS
.tbx-1043{position:relative;display:flex;width:min(268px,100%);min-height:135px;align-items:center;justify-content:center;flex-direction:column;gap:6px;border:2px dashed #aebed0;border-radius:11px;background:#fff;color:#48617a;font-family:system-ui;cursor:pointer;transition:border-color .25s,background .25s}
.tbx-1043 input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tbx-1043__icon{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#e8f3ef;color:#2d7e75;font-size:23px;transition:transform .25s,background .25s}
.tbx-1043 strong{font-size:12px}.tbx-1043 small{font-size:10px;color:#8995a5}
.tbx-1043:is(:hover,:focus-within){background:#f2fbf8;border-color:#2a8a7e}.tbx-1043:is(:hover,:focus-within) .tbx-1043__icon{background:#d6f3e8;transform:translateY(-3px)}
.tbx-1043:focus-within{outline:3px solid #db9b5e;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1043,.tbx-1043__icon{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
応募フォーム・添付ファイル付きお問い合わせ
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：ホバーのない端末でも情報が欠落しない設計を基本とします。クリックで操作するサンプルはタップで確認できます。
Browser：最新のChrome・Firefox・Safari・Edge向けCSS。:has()を利用する素材は最新ブラウザを想定しています。
Reduced Motion：prefers-reduced-motion: reduceに対応。