share facebook facebook twitter menu hatena pocket slack

2018.04.25 WED

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

工藤 響己

WRITTEN BY 工藤 響己

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


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のみで作るフローティングラベル

cloudpack

cloudpackは、Amazon EC2やAmazon S3をはじめとするAWSの各種プロダクトを利用する際の、導入・設計から運用保守を含んだフルマネージドのサービスを提供し、バックアップや24時間365日の監視/障害対応、技術的な問い合わせに対するサポートなどを行っております。
AWS上のインフラ構築およびAWSを活用したシステム開発など、案件のご相談はcloudpack.jpよりご連絡ください。