Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1144"><label for="tbx-1144-input">メールアドレス</label><input id="tbx-1144-input" type="email" placeholder="name@example.com" autocomplete="email" aria-describedby="tbx-1144-help"><span class="tbx-1144__hint" id="tbx-1144-help">ご案内をお送りするために使用します。</span></div>CSS
.tbx-1144{box-sizing:border-box;width:min(306px,100%);padding:14px 15px 0;background:#fff9f0;border:1px solid #dcc4a9;border-radius:11px;display:flex;flex-direction:column;font-family:system-ui,sans-serif;color:#604634;overflow:hidden}
.tbx-1144 label{display:block;font-size:12px;font-weight:800;margin:0 0 11px}.tbx-1144 input{box-sizing:border-box;display:block;width:100%;min-height:43px;padding:10px 12px;border:1px solid #bda78f;border-radius:6px;background:#fff;color:#47382c;font-family:inherit;font-size:13px;transition:border-color .32s,box-shadow .32s}.tbx-1144 input:focus{outline:2px solid #a8754d;outline-offset:2px}
.tbx-1144__hint{font-size:10px;color:#795b46;line-height:1.5;font-weight:600;display:block;margin-top:10px;padding:10px 9px;background:#f1e2cc;border-radius:6px 6px 0 0;opacity:.5;transform:translateY(6px);transition:transform .34s,opacity .34s}
.tbx-1144:is(:hover,:focus-within) .tbx-1144__hint{opacity:1;transform:translateY(0)}.tbx-1144:is(:hover,:focus-within) input{border-color:#a8754d;box-shadow:0 0 0 2px #cfad7e44}
@media (prefers-reduced-motion: reduce) { .tbx-1144, .tbx-1144 *, .tbx-1144::before, .tbx-1144::after, .tbx-1144 *::before, .tbx-1144 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Forms / Accessibility
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。