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

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 ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<:  MySQL 8.0.24 バージョンのインストールと設定方法のグラフィックチュートリアル

>>:  aタグのname属性とid属性を使用してページ内を移動する方法

推薦する

MySQLはライブラリ内の主キーなしでテーブルインスタンスコードを素早く取得します

概要MySQL データベースで主キーのないテーブルを表示するための SQL ステートメントをいくつか...

モバイルウェブサイトの開発に関するいくつかの結論

ウェブサイトのモバイル版には、少なくともいくつかの基本機能が必要です。 1. ページの適用性の問題:...

MySQL 結合テーブルと ID 自動増分の例の分析

結合の書き方左結合を使用する場合、左側のテーブルが必ず駆動テーブルになりますか? 2 つのテーブルの...

遭遇したいくつかのブラウザ互換性の問題について簡単に説明します

背景ブラウザの互換性の問題を解決するのは非常に面倒なことです。高度な技術はそれほど必要ありませんが、...

Mac で Docker を使用して Oracle をデプロイする方法

Mac で Docker を使用して Oracle をデプロイする方法まずdockerをインストール...

Trash-Cli: Linux のコマンドラインごみ箱ツール

ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...

VUEはトークンログイン認証を実装

この記事では、トークンログイン認証を実装するためのVUEの具体的なコードを例として紹介します。具体的...

WeChat アプレット ピッカー マルチ列セレクター (モード = multiSelector)

目次1. 効果図(複数列) 2. 通常セレクター: mode = selector、複数列セレクター...

Ubuntu 18.04にPython仮想環境をインストールする

Ubuntu 18.04 を使用する Python 開発者向けの参考資料です。 1. Ubuntu ...

mysqlパラメータsql_safe_updatesを使用して更新/削除範囲を制限する方法の詳細な説明

序文皆さんご存知のとおり、MySQL の運用・保守において、更新/削除条件が誤っているためにデータが...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

Linux でパスワードの有効期限を表示および設定する方法

適切な設定を行うことで、Linux ユーザーにパスワードを定期的に変更させることができます。パスワー...

クエリでのMySQLのユニークキーの使用と関連する問題

1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...

MySQL での r2dbc の使用に関する詳細な理解

導入MySQL は、私たちが日常業務で使用する非常に一般的なデータベースです。MySQL は現在 O...