HTML ドロップダウン メニューは、Web ページの一般的な対話型要素の 1 つであり、ユーザーはこれを使用して複数のオプションを簡単に参照して選択できます。今回はHTMLを使ってドロップダウンメニューを実装する方法を紹介します。
HTML ドロップダウン メニューの基本構造
まず、HTML ドロップダウン メニューの基本構造を見てみましょう。通常、基本的なドロップダウン メニューには次の要素が含まれます。
<form> <label for="selection">请选择：</label> <select name="selection" id="selection"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> </select> </form>
この例では、3 つのオプションを含むドロップダウン メニューを作成しました: オプション 1、オプション2とオプション3。各オプションは
<option> タグを使用して定義され、オプションの値は value 属性で指定され、オプションの表示テキストはタグ内に指定されます。 name 属性と id 属性は、それぞれドロップダウン メニューの名前と一意の識別子を指定します。 HTML ドロップダウン メニューのスタイルをカスタマイズする
実際、HTML ドロップダウン メニューのスタイルはカスタマイズできます。以下に一般的なカスタム スタイルをいくつか示します。
背景色とテキストの色select {
background-color: green;
color: white;
}select {
border: 1px solid gray;
box-shadow: 0 0 5px lightgray;
}フォントとフォント サイズ
select {
font-family: Arial;
font-size: 14px;
}カスタム オプション アイコン
select option::before {
content: '⬇︎';
margin-right: 5px;
}疑似要素は次のとおりです。各オプション アイコンの前に矢印アイコンを追加するために使用されます。
content 属性は、アイコンのコンテンツを定義するために使用されます。ここでは下向き矢印を使用し、margin-right プロパティを使用してアイコンとオプション テキスト間の距離を設定します。 もちろん、上記の例は一部の基本的なスタイルにすぎません。実際には、HTML ドロップダウン メニューのスタイルを調整する際には多くのスキルや注意点があり、さまざまなニーズに応じて具体的な調整が必要です。 概要
この記事では、HTML ドロップダウン メニューの基本構造とカスタム スタイルを紹介します。 HTML ドロップダウン メニューは、Web ページの一般的なインタラクティブ要素の 1 つであり、ユーザーのインタラクティブ エクスペリエンスと操作効率を向上させることができます。この記事があなたにインスピレーションを与えてくれれば幸いです。HTML ドロップダウン メニューをより深く理解して応用できる場合は、ディスカッションのためにメッセージを残してください。
以上がHTMLでドロップダウンメニューを作成する方法（作り方を詳しく解説）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
