HTML 選択ドロップダウンボックススタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明-htmlチュートリアル-php.cn

HTML 選択ドロップダウンボックススタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明

寻∝梦

リリース： 2018-08-30 11:32:56

オリジナル

15043 人が閲覧しました

この記事では、主に 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セレクトスタイルの詳しい説明

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 選択ドロップダウンボックススタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明

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 サイトの他の関連記事を参照してください。

HTML 選択ドロップダウン ボックス スタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明

HTML 選択ドロップダウンボックススタイルを作成するにはどうすればよいですか? htmlセレクトスタイルの詳しい説明