Live Demo
入力欄をクリックまたはTabで選択し、文字を入力してください。ラベルは入力後も上に残ります。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<label class="tbx-1036"><input type="email" name="email" autocomplete="email" placeholder=" " aria-label="メールアドレス"><span>メールアドレス</span></label>
CSS
.tbx-1036{position:relative;display:block;width:min(252px,100%);margin-top:9px;font:600 13px/1.4 system-ui,sans-serif}
.tbx-1036 input{box-sizing:border-box;display:block;width:100%;height:57px;padding:20px 14px 8px;border:1px solid #b9cbd6;border-radius:6px;background:#fff;color:#183951;font:600 13px/1.3 system-ui,sans-serif;outline:0;transition:border-color .25s ease,box-shadow .25s ease}
.tbx-1036>span{position:absolute;top:18px;left:14px;pointer-events:none;transform-origin:left center;transition:top .25s ease,font-size .25s ease,color .25s ease;color:#617b87}
.tbx-1036:hover input{border-color:#4c9c9e}
.tbx-1036 input:is(:focus,:not(:placeholder-shown)){border-color:#267f91;box-shadow:0 0 0 3px #75b7c12b}
.tbx-1036 input:is(:focus,:not(:placeholder-shown))+span{top:7px;font-size:10px;color:#267f91}
.tbx-1036 input:focus-visible{outline:2px solid #855fc2;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1036 input,.tbx-1036>span{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
お問い合わせ・資料請求フォーム
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作が必要な素材はクリック・入力にも対応。hover専用装飾は重要情報を隠さない設計です。
Browser：最新のChrome、Firefox、Safari、Edge向けのCSS。複数環境で最終検証してください。
Reduced Motion：prefers-reduced-motion: reduceに対応。