Live Demo
ホバー操作、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1300"><label for="tbx-1300-phone">Phone number <span>*</span></label><input id="tbx-1300-phone" type="tel" autocomplete="tel" placeholder="090 0000 0000" aria-describedby="tbx-1300-help"/><div class="tbx-1300__guide" id="tbx-1300-help"><span>FORMAT GUIDE</span><b>090-1234-5678</b><small>Use numbers and hyphens</small></div></div>CSS
*{box-sizing:border-box}
.tbx-1300{width:294px;max-width:100%;height:156px;position:relative;padding:19px;background:#eef3f9;border:1px solid #d6e0ef;border-radius:10px;font-family:system-ui,sans-serif;color:#253c57}.tbx-1300 label{display:block;font-size:13px;font-weight:740;margin-bottom:10px}.tbx-1300 label span{color:#c64e42}.tbx-1300 input{width:100%;height:39px;border:1px solid #c1cfde;background:white;color:#183852;border-radius:5px;padding:0 12px;font:13px system-ui,sans-serif;outline:none;transition:border-color .3s,box-shadow .3s}.tbx-1300 input:hover,.tbx-1300 input:focus-visible{border-color:#5989bc;box-shadow:0 0 0 3px #8baddb32}.tbx-1300__guide{position:absolute;left:19px;right:19px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:5px;transform:translateY(12px);opacity:0;transition:transform .34s,opacity .34s;pointer-events:none}.tbx-1300__guide span{font-size:8px;letter-spacing:.1em;color:#5279a0;font-weight:750}.tbx-1300__guide b{font-size:11px}.tbx-1300__guide small{font-size:8px;color:#7890a6}.tbx-1300:hover .tbx-1300__guide,.tbx-1300:focus-within .tbx-1300__guide{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.tbx-1300 *,.tbx-1300::before,.tbx-1300::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Form / Contact
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバー動作が異なるため、フォーカス操作・実案件のタップ操作を確認してください。
Browser：Chrome / Firefox / Edge / Safariの標準CSS機能を使用します。
Reduced Motion：prefers-reduced-motion: reduceでCSSアニメーション・トランジションを停止します。