CSSのみで作るフローティングラベル

JavaScriptを使わず、CSSのみで動くフローティングラベルを作ってみました。
inputフィールドにfocusを当てるとあたかもplaceholderが飛び出すような動きでlabelがアニメーションします。
Chrome、FF、Safariなどのメジャーどころのモダンブラウザの他Edgeでも動いてくれました（IEってなあに？）。

さりげないおしゃれアイテムa.k.a.UXを向上させるマイクロインタラクションとして効果が期待できそうです。

動くサンプル

See the Pen Pure CSS floating label on input field by Hibiki Kudo (@h_kudo) on CodePen.

コードサンプル

index.html

  

    
    Your email address
  

style.scss

.signup {
  position: absolute;
  width: 300px;
  padding: 30px;
  background-color: #f3f3f3;
  top: 50%;
  left: 50%;
  margin: auto;
  border-radius: 3px;
  transform: translate(-50%, -50%);
}
.signup__body {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.signup__field {
  border-radius: 3px;
  border: 1px solid #ccc;
  font-size: 16px;
  height: 44px;
  width: 100%;
  padding: 0 15px;
  &::-webkit-input-placeholder {
    transition: color 0.15s ease;
    color: #aaa;
  }
  &::-moz-placeholder {
    transition: color 0.15s ease;
  }
  &:focus {
    &::-webkit-input-placeholder {
      color: #fff;
      transition: color 0.3s ease;
    }
    &::-moz-placeholder {
      color: #fff;
      transition: color 0.3s ease;
    }
    + .signup__label {
      opacity: 1;
      transform: translateY(-18px);
    }
  }
}
.signup__label {
  position: absolute;
  opacity: 0;
  font-size: 12px;
  line-height: 1;
  top: 1px;
  color: #666;
  transform: translateY(0);
  font-weight: bold;
  transition: all 0.15s;
}

元記事はこちら

「CSSのみで作るフローティングラベル」