ユーザーフォームの入力ボックスのフォーカスに、ちょっとしたエフェクトを追加します。

単一の入力ボックス・フォームにフォーカスが当たっているときに入力ボックスが変化します。

具体化

html構造コード

<input type="text" placeholder="お名前を入力する" />

cssのコードは、もちろんクラスセレクタを使うことも可能ですが、ここではセレクタの優先順位について、cssの属性セレクタを使ってみましたので、試してみてください。

インラインスタイル > IDセレクタ > クラスセレクタ = プロパティセレクタ = 疑似クラスセレクタ > ラベルセレクタ = 疑似要素セレクタ

具体的なコード例を以下に示します。

input[type='text'],
input[type='password'] {
 height: 40px;
 width: 200px;
 background: transparent;
 border: none;
 border-bottom: 1px solid #999;
 text-indent: 20px;
 transition: 0.3;
 outline: none;
}
input[type='text']:hover,
input[type='password']:hover {
 border-color: #42b983;
}

input[type='text']:focus,
input[type='password']:focus {
 border-bottom-color: #f1190d;
}

input[type='password']::-webkit-input-placeholder,
input[type='text']::-webkit-input-placeholder {
 transition: 0.5s;
 font-size: 14px;
 transform-origin: top left;
}
input[type='password']:focus::-webkit-input-placeholder,
input[type='text']:focus::-webkit-input-placeholder {
 transform: scale(0.8) translateY(-10px);
}

分析

この効果を得るために、-webkit - input - placeholder;擬似要素のアプローチと、cssのtransform、scale down、vertical panningを組み合わせています。

擬似クラスと擬似要素の詳細については、擬似クラスと擬似要素を参照してください。