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 クイック挿入数千万の大規模データの例

データ分析の分野では、データベースは私たちの強力な助けとなります。クエリ時間を受け入れるだけでなく、...

Windows で Mysql を起動したときに 1067 が表示される場合の解決策

数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...

vue-element-admin プロジェクトのインポートとエクスポートの実装

vue-element-admin インポートコンポーネントのカプセル化テンプレートとスタイルまず、...

CocosCreator システムイベントがどのように生成され、トリガーされるかについての詳細な説明

目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ: 1. アップロードファイルの制限関数: 1. フロントエンド操作による異常な...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

MySQL データベース面接に必須の 3 つのログの紹介

目次1. redo ログ (MySQL ストレージ エンジン InnoDB のトランザクション ログ...

Windows 10 に TomCat をインストールするチュートリアル図

WindowsにTomCatをインストールするこの記事では、WindowsプラットフォームにTomC...

プロセスのすべての情報を表示するLinuxメソッドの例

サーバー上にタスク プロセスがあります。 ps -ef | grep task を使用して表示すると...

Linux環境でグラフデータベースneo4jを構築する方法の説明

Neo4j (Nosql の 1 つ) は、高性能なグラフ データベース (分散をサポートしていませ...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

MySQLで大きなテーブルを正常に削除する方法の詳細な説明

序文テーブルを削除するには、無意識に思い浮かぶコマンドは、DROP TABLE "テーブル...

IE6のmin-widthとmin-heightと互換性を持たせる簡単な方法

ウェブサイトがワイドスクリーンの場合、ブラウザ ウィンドウを左右にドラッグすると、ウェブサイトの幅が...

MySQL 5.7.13 のインストールと設定方法の Mac でのグラフィック チュートリアル

MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...