【CSS】Focus時のInputをいい感じにする

完成品イメージ

InputにFocusした時に↓のように下線が広がるようにします。

CSSだけでつくれちゃいます。

サンプルコード

HTML

index.html

<input class="input">
<div class ="underline"></div>

CSS

style.css

.input {
  width: 200px;
  height: 30px;
  font-size: 16px;
  border: none;
  outline: 0;
  border-bottom: 1px solid #d1d5db;
}

.underline {
  width: 200px;
  height: 2px;
  background: skyBlue;
  transform-origin: center center;
  transform: scaleX(0);
  transition: transform 0.18s ease-out;
}

.input:focus + .underline {
    transform: scaleX(1);
  }

ポイントは、.input:focus + .underline でFocus時に自身の要素(input)ではない要素(.underline)のCSSを変えていることです。
+セレクタは隣接する要素に適応されます。

手軽に使えるので、ちょっとしたアクセントにお試しください。