テキスト入力ボックスのスタイルを達成するために、Googleのマテリアルデザインの純粋なCSS

みなさん、こんにちは、今日あなたが達成するために、純粋なCSSを使用する方法をあなたと共有したいGoogleのマテリアルデザインスタイルのテキスト入力ボックスを。

今日が、私たちは、フレームワークの多くは、私たちはこれらのスタイルを達成するのを助けることができていますが、根本的な原理を使用する方法を学ぶことによってでき、達成するための純粋なCSSでカスタマイズされたフレームアセンブリのビジネスニーズに基づいて、当社の将来のニーズの能力を強化します。

デモはここを参照してください：私が思うポイント[デモ] CodePen

最終レンダリングは：

のみChromeブラウザで上記のテスト。あなたは他のブラウザには問題があることが判明した場合、一緒に進捗状況を学習し、修正方法を提供することを歓迎！

達成するために仕事を始めました

まずは、以下のHTMLを作成してみましょう：

<form>
  <input type="text" required />
  <label>
    <span>Username</span>
  </label>
</form>

これは、ユーザー名を入力するには、通常のHTMLフォームです。

私はスマートな人々は、我々は意志、気づいたことを信じている背面の<ラベル>タグの<input>タグのために私たちの後の<input>タグの状態によって、<label>を選択する必要の、。しかし、彼らは、同じレベルの兄弟である純粋なCSSセレクタの次の兄弟を選択する唯一の方法の間の背中の上に、我々は<ラベル>タグを。

レンダリング：

そして、私たちにいくつかのカスタムCSSエフェクトを行うには、<form>要素をしましょう。

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
}

このセクションでは、CSSの何も特別では、唯一のフォントの長さと高さを定義することです。

その後のいくつかのスタイル上の<input>要素を与えてみましょう。

form input {
  height: 2rem;
  width: 10rem;
  border: none;
  border-bottom: 0.1rem solid black;
}

このセクションでは、主に幅のCSSの長さを設定されている、唯一の境界線の下が設定され、下線の気持ちを聞かせて。

レンダリング：

次は私たちは、言葉がトップユーザー名テキスト入力ボックスに移動しますされた<label>タグを、設定したいです。

form label {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

それは我々が設定されていることは注目に値します。

ポインタイベント：なし。

将来のマウスでの希望は、テキスト入力ボックスがイベントを集中することができたときにテキストをトリガするためにクリックするのではなく、フォントのトリガ・イベントを選択します。

レンダリング：

次の私たちは、<入力>要素を与えることがパディングトップを増加させ、そうすることが少しアップ<label>はユーザー名、トップすることができます。

その青い枠線が表示されなくなりますときに我々は、テキスト入力ボックスをクリックするとことを、なし：その後、我々は、<入力>要素に加えてアウトラインを与えます。

form input {
  height: 2rem;
  width: 10rem;
  padding-top: 1rem; /* 新增 */
  border: none;
  border-bottom: 0.1rem solid black;
  outline: none; /* 新增 */
}

図効果：

その後、我々は後に:: <input>要素擬似要素の背面の下部にある境界線を形成するようにしたい、と左のボーダーたいと下のレベル。

オーバーフローによる将来へのあなたが左に平らな底部の境界線が欲しい理由は、：隠された;隠すこと、私たちは視覚的なインパクトを強化する手段として、バックフレーム翻訳の下に来たときにテキスト入力ボックスがチェックされている場合のみ。

form label::after {
  content: ""; /* 这个很关键，我们需要这个属性底部边框才会显示出来 */
  height: 3rem;
  width: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: 0.2rem solid #1cb9b6; /* 底部边框需要较为突出，这里我们加粗跟上颜色 */
  transform: translateX(-100%); /* 向左平移 100% 确保移出 form 元素之外 */
  transition: all 0.3s ease; /* 添加动画来达到平滑移动的效果 */
}

図効果：

その後、我々はちょうど下の境界線の上に、下向きの<label>ユーザー名の要素をしたいです。

form label span {
  position: absolute;
  bottom: -3rem;
  left: 0;
  transition: all 0.3s ease; /* 动画，达到平滑移动的效果 */
}

レンダリング：

その後、我々はパターンを作るために有効な状態での<input>要素にフォーカスして与えます。我々は、テキスト入力ボックスを選択した場合には、ある、またはテキスト入力ボックスのテキストがある場合には、彼らが強調されたスタイルを処罰する必要があります。

私たちはHTMLの<input>に与えるための状態である理由ここでは、正当な理由を使用することができ、必要なプロパティを設定したテキストが一度あったときに、テキスト入力ボックスが有効な状態であり、その逆もまた同様です。

<input type =「text」必要/>

form input:focus + label span,
form input:valid + label span {
  transform: translateY(-120%); /* 将 Username向上平移 */
  font-size: 1.2rem; /* 变大字体，突显高亮效果 */
  color: #1cb9b6; /* 高亮颜色 */
}

form input:focus + label::after,
form input:valid + label::after {
  transform: translateX(0); /* 将左边的高亮底部边框平移回来 */
}

レンダリング：

;それは隠された：その後、我々たくないが強調表示され、皮の下の境界で左のアイドル、私たちは、<form>要素のセットのオーバーフローを与えます。

form {
  width: 50%;
  height: 50vh;
  margin: auto;
  position: relative;
  font-family: Sans-serif;
  overflow: hidden; /* 新增 */
}

選択されていない、または状態が入力されていない場合で、それが視界の外、左の下の境界を強調しています。

レンダリング：

このように、我々は、テキスト入力ボックスのGoogleのマテリアルデザインの仕様を完了しました。

お読みいただき、ありがとうございました！

まだ学ん著者は、何かが間違っがある場合は、指摘し、含まれている、あなたに感謝してください！

著者：デビッド・チョウ（バンクーバーSFUコンピュータ学生）