Result
プレースホルダーに見せかけたlabelを、フォーカス時に縮小しながら上部に移動する、というエフェクトです
css
.input-container {/*inputやlabelの包括コンテナ*/ margin: 0; margin-bottom: 5px; padding-top: 12px; position: relative;}.input-container label {/*label要素のスタイリング*/ position: absolute; top: 14px; left: 4px; color: #aaa; transition: all 0.2s; cursor: text; font-family: sans-serif; font-size: 16px; line-height: 24px;}.input-container input {/*input要素のスタイリング*/ height: 24px; padding: 2px; border: none; border-bottom: 1px solid #ccc; font-family: sans-serif; font-size: 16px; line-height: 20px; color: #555; -webkit-font-smoothing: antialiased; outline: none; width: 100%;}.input-container input:focus, .input-container input.filled { border-bottom: 1px solid #aaa;}.input-container input:focus + label, .input-container input.filled + label {/*フォーカスしたらfont-size:11px;のサイズにしつつtop:0;の位置に移動*/ font-size: 11px; line-height: 12px; top: 0px; color: #777;} |
