CSSで選択入力ボックスの背景を削除する方法

HTML フォーム要素のデフォルトのスタイルは、多くの場合、少々退屈で、魅力的ではありません。デザインの改善が必要となることが多い要素の 1 つは、ユーザーに選択できるオプションのリストを表示するために使用される select 入力ボックス です。この記事では、CSSを使用して選択入力ボックスのデフォルトの背景を削除する方法を説明します。

これを行うと、選択入力の外観をカスタマイズして、より視覚的に魅力的で、Web サイトまたはアプリケーションの全体的なデザインと一貫性のあるものにすることができます。

CSS のさまざまな入力フィールド

まず、この問題の解決に進む前に知っておく必要がある基本的な知識を理解しましょう。最初に知っておく必要があるのは、Web ページの入力とは何ですか?ユーザーがデータを入力および送信できるデータは、Web サイトでは 入力フィールド と呼ばれます。

HTML ではさまざまなタイプの入力が提供されます。たとえば、

テキスト領域、ラジオ ボタン、選択オプション などです。各入力には異なるデフォルトのスタイルがあります。多くの場合、Web サイトにインパクトを与え、他の Web サイトと区別するには、カスタム スタイルを使用する必要があります。

Web サイトで使用される一般的な入力フィールドの例を以下に示します。

リーリー

2 番目に知っておく必要があるのは、これらの入力に関する「

ステータス」です。データを入力するために入力フィールドを操作するときは常に、入力フィールドは "active" 状態と呼ばれますが、入力フィールドがタッチされていない場合は、"inactive" 状態と呼ばれます。 。それらを説明するために使用される別の用語は、「集中」状態と「非集中」状態です。デフォルトでは、すべての入力はフォーカスされていません。

これで、この問題の解決策を開始できます。 CSS は、特定の入力フィールドの異なる状態または特殊な状態を配置するためのさまざまな「

疑似クラス 」を提供します。クラスの 1 つはフォーカス疑似クラスです。これは、サイト上の「focused」状態にある要素に適用されます。これは、ユーザーがキーボードまたはマウスで要素をクリックすることによって要素を操作することを意味します。フォーカスされている間に入力背景を削除するために、この 疑似クラス を利用します。これを行うには、目標を達成するためにデフォルトのスタイルを変更します。

ただし、これはユーザーが入力した入力タイプに対してのみ機能します。多くの場合、Web サイトには、既存のオプションのリストを含むドロップダウン リストが含まれており、ユーザーは指定されたリストから 1 つ以上を選択できます。

他の入力フォームと同様、これも入力フィールドであり、デフォルトのスタイルが関連付けられています。 HTMLのselectタグを使用してカスタムドロップダウンリストを作成できます。主にフォーム内のユーザーデータを収集するために使用されます。以下は、select タグを使用したドロップダウン リストの例です。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃ リーリー

上の例では、select タグに名前と ID を指定しました。name 属性はユーザーによる送信後に参照するためのものであり、id 属性は送信後に送信されるデータにアクセスするために使用されます。ユーザーが選択できるオプションを提供するには、option タグを使用します。リストをよりアクセスしやすく、明確にするために、他のいくつかの属性も使用できます。

Example

の中国語訳は次のとおりです:

Example

以下の例では、 –webkit-Appearance : none を使用して背景を完全に削除できます。

リーリー

上記の例の視覚的な出力は異なり、デフォルトの灰色がかった背景色が含まれていないことがすでにわかります。もう 1 つの非直感的なアプローチは、

div

をコンテナーとして使用することです。選択ボックス。その後、幅制限を設定してオーバーフローを非表示にし、選択ボックスの幅をコンテナ

div

よりも若干小さくします。そうすれば、デフォルトのスタイルの矢印が Web ページから消えます。

この記事で行うような単一ラベルの配置とは異なり、ほとんどの開発者は ID とクラスを使用して共通のスタイルを作成するため、同様の状況でコードを繰り返す必要がないことに注意してください。

＃＃＃結論＃＃＃ この記事では、CSS で入力背景を削除する問題の解決策について説明します。その過程で、入力ボックス、そのタイプ、デフォルトのスタイル、およびその状態について学びました。また、疑似クラス セレクターを使用して要素の特殊な状態をターゲットにする方法も学びました。

以上がCSSで選択入力ボックスの背景を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。