CSS を使用して、Google 検索バー (入力ボックスなど) をマウスオーバー時にハイライト表示する方法は?

検索バーは、消費者が独自の情報にアクセスするために検索バーを利用しているにもかかわらず、Web サイトのデザイン プロセスで見落とされがちなコンポーネントです。検索バーは Web サイトで最もよく使用される部分の 1 つであるため、検索バーのデザインはユーザー エクスペリエンスに大きな影響を与えます。

検索バーは、100 ページを超える複雑なコンテンツがあるサイトに役立ちます。検索バーは、顧客が企業対消費者 (B2C) 分野の大規模な e コマース サイト、ニュース サイト、取引サイト、予約サイトの情報を見つけるのに役立ちます。また、複数の顧客セグメントと製品ラインを持つ大規模な B2B サイトでも採用されています。ページ数が少ない小規模な Web サイトの場合、検索バーは必要ないかもしれませんが、Web サイトが成長するにつれて、検索バーは不可欠になります。

検索バーは基本的に、入力フィールドとボタンという 2 つの UI 要素で構成されます。この記事では、CSS プロパティを使用して、Google 検索バーに似た入力ボックスのハイライトを作成する方法を説明します。

Google 検索バー

検索バーは、ユーザーがインターネット上で必要な情報を検索できるようにするインターネット ブラウザーの場所です。また、読者は Web サイトを閲覧しながら検索することもできます。同様に、ユーザーは Google 検索バー (Google アプリにリンクされた検索ウィジェット) を使用して、ホーム画面からあらゆる種類の検索を実行できます。

入力ボックス

タグは、ユーザーがデータを送信するためのインタラクティブな Web ベースのフォームを作成するために使用される HTML 要素です。デバイスやユーザーの種類に応じて、さまざまな入力データの種類があります。 要素は、さまざまな入力データ型と属性があるため、HTML で最も人気があり、よく使用される要素の 1 つです。

以下はその構文です -

リーリー

注 - 要素の要素を定義するには、 タグを使用します。 要素の for 属性は、 要素の id と同じである必要があります。

CSS ホバー プロパティ

:hover は、ポインティング デバイスがクリックされたか、特定の要素上に移動したことをユーザーが認識できるようにする CSS 疑似クラスです。たとえば、ページ上の要素の上にマウスを置くと、指定された CSS プロパティに基づいてそのフォントの色や背景の色が変化する場合があります。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

以下の例を参照してください -

リーリー

「Button」要素の上にマウスを置くと、その中のテキストの色が青から赤に変わります。さらに、テキストのフォントサイズも大きくなります。

ボックスシャドウのプロパティ

box-shadow プロパティを使用すると、開発者は 1 つ以上のシャドウを要素に適用できます。複数のエフェクトをカンマで区切って割り当てます。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃ リーリー

入力ボックスの強調表示を作成する

Google 検索バーのような入力ボックスを作成するには、次の手順に従う必要があります -

type="text" の入力フィールドを作成します。

CSS を使用して高さと幅を調整します。 box-shadow プロパティを使用して、入力フィールドに影効果を提供します。

Google 検索バーと同様にするには、ホバー時に影効果が表示される必要があるため、CSS ホバー プロパティを使用します。

• ＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃
この記事では、マウスを置くと強調表示される Google 検索バーに似た入力ボックスを作成する方法について説明しました。

以上がCSS を使用して、Google 検索バー (入力ボックスなど) をマウスオーバー時にハイライト表示する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。