コピペで簡単！ CSSのみで、フォームの入力時にフロートする入力欄のラベルを実装するテクニック
Post on:2023年7月10日
sponsors
フォームの入力欄のラベルが入力時にふわりとフロートして移動するのをCSSのみで実装するテクニックを紹介します。
HTMLはinputとlabelで非常にシンプル、余計なspanなどはありません。ラベルのフロートはCSSで実装されており、コピペで簡単に使用できます。
CSS only floating input labels
実際の動作は、下記ページからどうぞ。
See the Pen
CSS only floating input labels by Stanko (@stanko)
on CodePen.
HTMLは、シンプルです。
|
1 2 3 4 |
<div class="input-wrapper"> <input autocomplete="off" class="input" type="text" id="name" placeholder="Name"> <label class="label" for="name">名前</label> </div> |
入力欄をクリアするボタンは、SVGで実装されています。
|
1 2 3 4 5 6 7 8 9 |
<div class="input-wrapper"> <input autocomplete="off" class="input" type="text" id="name" placeholder="Name"> <label class="label" for="name">名前</label> <button class="clear" aria-label="Clear input"> <svg viewBox="0 0 16 16" width="12" height="12"> <path d="M 1 1 L 15 15 M 1 15 L 15 1" fill="none" stroke-width="2" stroke="currentColor" /> </svg> </button> </div> |
CSSで実装する際のポイントは、疑似クラス:placeholder-shownを:not()で使用することで入力欄に値があるかどうかを調べることができます。
|
1 2 3 4 5 |
/* 入力欄に値がない場合*/ input:placeholder-shown /* 入力欄に値がある場合 */ input:not(:placeholder-shown) |
:placeholder-shownはIEを除く、すべてのブラウザにサポートされています。
入力時にラベルをフロートして再配置するCSSは、下記の通りです。
|
1 2 3 4 |
input:focus + label, input:not(:placeholder-shown) + label { transform: translateY(-100%) scale(0.75); } |
クリアを除いた、CSSは下記の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
.input-wrapper { position: relative; margin-top: 30px; margin-inline: auto; max-width: 400px; } .input { font-size: 20px; width: 100%; padding: 8px 0; padding-right: 30px; color: #333; border: none; border-bottom: 1px solid #ddd; transition: border-color 250ms; background-color: transparent; } .input:focus { outline: none; border-bottom-color: #777; } .input::placeholder { color: transparent; } .input::-webkit-contacts-auto-fill-button { visibility: hidden; pointer-events: none; position: absolute; } .label { position: absolute; top: 8px; left: 0; color: #43454e; pointer-events: none; transform-origin: left center; transition: transform 250ms; font-family: sans-serif; } .input:focus + .label, .input:not(:placeholder-shown) + .label { transform: translateY(-100%) scale(0.75); } .input:placeholder-shown + .label + .clear { display: none; } |
Safariでは、inputにplaceholder属性が明示的に定義されている場合にのみ:placeholder-shown疑似クラスが追加されます。placeholderが必要ない場合は、CSSで非表示にしておきます。
|
1 2 3 |
input::placeholder { color: transparent; } |
sponsors
