ホームページ > 記事 > ウェブフロントエンド > HTML 選択ドロップダウン ボックス スタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明
HTML 選択ドロップダウン ボックス スタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明
- 寻∝梦オリジナル
- 2018-08-30 11:32:5615037ブラウズ
この記事では、主に HTML select タグのドロップダウン ボックスの作成と、HTML select タグのスタイル分析について紹介します。 最後に、HTML select タグのケースを 2 つ紹介します。次に、この記事を一緒に見てみましょう
まず、HTML 選択ドロップダウン ボックス スタイルの作成を見てみましょう:
ネイティブの選択ドロップダウン ボックスは、実際には非常に便利です。オプションのスムーズなドロップダウン ボックスにオプションを直接書き込むことで取得できますが、ネイティブ スタイルにも懸念があります。
まず、主要なブラウザで表示されるスタイルの結果も多様で、IE でのスタイルはオプションの位置に応じてスライドするため、さらに独特です。
ここではカスケード スタイル シートを使用せず、純粋な HTML を使用して作成しています:
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<script type="js/index.js"></script>
<title>php中文网之下拉列表</title>
</head>
<body >
<form>
<p>下拉列表</p>
<select>
<option>html</option>
<option>php</option>
<option>python</option>
<option>其它</option>
<option>html</option>
<option>php</option>
<option>python</option>
<option>其它</option>
</select>
</form>
</body>
</html>これをクリックした後のレンダリングです:
HTML 選択ドロップダウン ボックスが完成しました。次に、HTML 選択の他のスタイルのアイデアを見てみましょう:
1. まず、選択自体の元のスタイルを削除します。
2. 要素 (div/lebal など) を select の親要素として使用します。
3. 選択した親要素の後に新しいスタイルを作成するには、: after を使用します。
<body>
<br />
<select id="selectTravelCity" title="Select Travel Destination">
<option>php中文网</option>
<option>Washington DC</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>Phoenix</option>
</select>
<br />
<br />
<label id="lblSelect">
<select id="selectPointOfInterest" title="Select points of interest nearby">
<option>PHP中文网</option>
<option>food beverage</option>
<option>restaurant</option>
<option>shopping</option>
<option>taxi limo</option>
<option>theatre</option>
<option>museum</option>
<option>computers</option>
</select>
</label>
</body>とてもたくさんありますが、難しくはありませんが、まだもっと練習する必要があります
上の写真を見ると、これのレンダリングを考えるのは簡単ですが、それでもレンダリングを示します:
HTML 選択タグの 2 つのケース分析:
ケース 1: HTML の選択を選択不可にするにはどうすればよいですか?
テスト要件により、オプションの 1 つを修正する必要があり、他のオプションは選択できないとします。この選択が無効になっている場合、値をまったく取得できなくなります。他に方法はありますか?読み取り専用も不可能ですが、選択することはできます。
答え: オプションを 1 つ置くか、オプションに disabled="disabled" を追加するだけです
<form id="form1" name="form1" method="post" action="">
<select name="select">
<option>aa</option>
<option disabled="disabled">bb</option>
<option>cc</option>
</select>
</form>ケース 2: 選択範囲の幅を調整するにはどうすればよいですか?
回答: 選択タグにスタイルを追加できます
<style>.s1{ width: 200px;}</style>
<select class="s1">
<OPTION>很长很长也能显示</OPTION>
<OPTION>很长很长也能显示</OPTION>
</select>以上がこの記事の全内容です。 ご質問がございましたら、下記よりお気軽にお問い合わせください。
【編集者のおすすめ】
html5のcanvasタグとは何ですか？ Canvasタグの使い方を紹介
HTMLでtext insタグを挿入する方法とtext delタグを削除する方法を併用するには？ (例あり)
以上がHTML 選択ドロップダウン ボックス スタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。