CSS は Google マテリアル デザインのテキスト入力ボックス スタイルを実装します (推奨)

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

現在、これらのスタイルの実装に役立つフレームワークは数多くありますが、最下位レベルで純粋な CSS を使用する方法を学ぶことで、将来のビジネス ニーズに応じてこれらのフレームワーク コンポーネントをカスタマイズする能力を高めることができます。

デモはこちらをご覧ください: デモを見るにはここをクリックしてください [CodePen]

最終結果:

Chrome ブラウザでのみテストされています。他のブラウザで問題が見つかった場合は、修正方法を提供していただき、一緒に学び、改善していただければ幸いです。

実装を開始する

まず、次の HTML を作成します。

<フォーム>
  <input type="text" が必要です />
  <ラベル>
    <span>ユーザー名</span>
  </ラベル>
</フォーム>

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

賢い人なら誰でも、<input> タグの状態に基づいて後で <label> を選択する必要があるため、<label> タグを <input> タグの後に配置することに気付いたと思います。ただし、これらは兄弟であり、純粋な CSS セレクターは次の兄弟を選択する方法しか提供しないため、<label> タグを最後に配置します。

効果画像:

次に、<form> 要素の CSS 効果をカスタマイズしましょう。

形状 {
  幅: 50%;
  高さ: 50vh;
  マージン: 自動;
  位置: 相対的;
  フォントファミリー: サンセリフ;
}

CSS のこのセクションには特別なことは何もありません。長さ、高さ、フォントを定義するだけです。

次に、<input> 要素にいくつかのスタイルを追加しましょう。

フォーム入力 {
  高さ: 2rem;
  幅: 10rem;
  境界線: なし;
  border-bottom: 0.1rem 黒一色;
}

この CSS セクションでは、主に長さと幅を設定し、下線付きの印象を与えるために下の境界線のみを設定します。

効果画像:

次に、ユーザー名のテキストをテキスト入力ボックスの上に移動するための <label> タグを設定する必要があります。

フォームラベル {
  位置: 絶対;
  上: 0;
  左: 0;
  ポインタイベント: なし;
}

ここで注目すべきは、次の設定です。

pointer-events: none;

将来的には、マウスでテキストをクリックすると、フォント選択イベントの代わりにテキスト入力ボックスのフォーカス イベントがトリガーされるようになることが期待されます。

効果画像:

次に、<input> 要素に padding-top を追加する必要があります。これにより、<label> ユーザー名が少し上に移動します。

次に、<input> 要素に outline: none を追加します。これにより、テキスト入力ボックスをクリックしても青い境界線が表示されなくなります。

フォーム入力 {
  高さ: 2rem;
  幅: 10rem;
  padding-top: 1rem; /* 新規 */
  境界線: なし;
  border-bottom: 0.1rem 黒一色;
  アウトライン: なし; /* 新規 */
}

効果画像:

次に、<input> 要素の後の疑似要素 ::after に下境界線スタイルを適用し、下境界線を左に移動する必要があります。

下境界線を左に移動させる理由は、将来的に overflow: hidden; によって非表示になるためです。テキスト入力ボックスが選択されているときのみ、視覚的なインパクトを高めるために下境界線が後ろに移動されます。

フォームラベル::after {
  content: ""; /* これは非常に重要です。下の境界線を表示するにはこの属性が必要です*/
  高さ: 3rem;
  幅: 10rem;
  位置: 絶対;
  上: 0;
  左: 0;
  border-bottom: 0.2rem solid #1cb9b6; /* 下の境界線をもっと目立たせたいので、太字にして色をつけます*/
  transform: translateX(-100%); /* フォーム要素の外側になるように左に 100% 移動します */
  transition: all 0.3s easy; /* スムーズな動きを実現するためにアニメーションを追加します */
}

効果画像:

次に、<label> 要素のユーザー名を下部の境界線上に配置します。

フォームラベル span {
  位置: 絶対;
  下部: -3rem;
  左: 0;
  transition: all 0.3s easy; /* スムーズな動きの効果を実現するためのアニメーション*/
}

効果画像:

次に、フォーカスが当たっていて有効な状態にあるときに <input> 要素にスタイルを設定する必要があります。つまり、テキスト入力ボックスを選択した場合、またはテキスト入力ボックスにテキストがある場合は、それらが強調表示される必要があります。

ここで有効な状態を使用できる理由は、HTML で <input> に required 属性を設定するため、テキスト入力ボックスにテキストがある場合は有効な状態になり、その逆も同様だからです。

<input type="text" が必要です />
フォーム入力:フォーカス + ラベルスパン、
フォーム入力:有効 + ラベル span {
  transform: translateY(-120%); /* ユーザー名を上に移動*/
  font-size: 1.2rem; /* ハイライト効果を強調するためにフォントサイズを大きくします*/
  color: #1cb9b6; /* ハイライトカラー*/
}
フォーム入力:focus + label::after、
フォーム入力:valid + label::after {
  transform: translateX(0); /* 強調表示された左下の境界線を後ろに移動する*/
}

効果画像:

次に、ハイライトされていないときに左側にあるアイドル状態の下部境界線を非表示にする必要があります。<form> 要素に overflow: hidden; を設定するだけです。

形状 {
  幅: 50%;
  高さ: 50vh;
  マージン: 自動;
  位置: 相対的;
  フォントファミリー: サンセリフ;
  overflow: hidden; /* 新規 */
}

選択されていない、または入力されていない場合は、左側の強調表示された下の境界線は見えなくなります。

効果画像:

このようにして、Google マテリアル デザイン仕様のテキスト入力ボックスが完成しました。

要約する

上記は、エディターが導入した Google マテリアル デザインのテキスト入力ボックス スタイルの CSS 実装です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!