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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

寻∝梦

Aug 30, 2018 am 11:32 AM

htmloptionselect

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

オンラインコードエディターはコード入力を実装するためにどのようなHTML要素を使用していますか？Apr 05, 2025 pm 01:21 PM

WebコードエディターのHTML要素分析では、多くのオンラインコードエディターを使用すると、ユーザーはHTML、CSS、およびJavaScriptコードを入力できます。最近、誰かが提案した...

React static Page構成：React-AppReviredを使用したコード圧縮を避ける方法は？Apr 05, 2025 pm 01:18 PM

React-App-Recrowiredを使用して静的ページを構築するときにコード圧縮を回避する方法について多くの開発者が配信したい...

See all articles

ホットAIツール

ホットツール

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。