Select2コンテナスタイルのカスタマイズ：カスタムCSSクラスを追加します

この記事では、select2のcoanterercssclass構​​成オプションを介してselect2によって生成されたコンテナ要素にカスタムCSSクラスを追加する方法について詳しく説明します。これにより、開発者はSelect2ドロップダウンメニューの全体的な外観を簡単にパーソナライズできるため、より柔軟なスタイルコントロールが特定のUI設計ニーズを満たすことができます。

フロントエンドの開発では、強力なjQueryセレクタープラグインとしてのSelect2は、HTML 要素のインタラクティブ性と美学を大幅に向上させます。ただし、Select2コンポーネントが全体的なページスタイルと一致したり、特定の視覚効果を達成するためには、開発者が生成するDOM構造をスタイリングする必要があることがよくあります。この記事では、柔軟なスタイルコントロールを有効にするために、select2コンテナにカスタムCSSクラスを追加する方法に飛び込みます。

select2のDOM構造を理解します

select2が要素を初期化すると、元のを隠し、隣の新しい要素を可視select2コンテナとして生成します。これには通常、Select2 select2-containerなどのデフォルトのクラスが付属しています。 select2とのすべてのユーザーインタラクションは、この生成されたおよびその子供で発生します。したがって、select2の全体的な外観をカスタマイズするには、このコンテナにカスタムスタイルを適用する必要があります。

containcssclassを使用してカスタムクラスを追加します

select2は、coanterercssclassと呼ばれる構成オプションを提供し、開発者が初期化時に生成されたselect2コンテナに直接1つ以上のカスタムCSSクラスを追加できるようにします。これは、コンテナスタイルのカスタマイズを実装するための最も直接的で推奨される方法です。

文法

$（ '＃your-rect-element'）。select2（{{
  coltancssclass：「私のカスタムコンテナークラスの別のクラス」
}）;

それがどのように機能するか

select2が初期化されると、containcssclassオプションの値を読み取り、これらのクラスをメインコンテナ要素に追加します。このようにして、CSS StyleSheetでこれらのカスタムクラスのスタイルルールを定義して、Select2コンテナの表示に影響します。

サンプルコード

COST2ドロップダウンメニューにカスタムCSSクラスを追加し、対応するスタイルを適用する方法の完全な例を以下に示します。

 


    
    <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
    <title> select2コンテナスタイルのカスタマイズ</title>
    
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="styleSheet">
    
     
    
     

    <style>
        /*カスタムコンテナスタイルを定義*/
        .my-select2-container {
            国境：2pxソリッド＃007bff！重要; /*青い境界*/
            ボーダーラジウス：8px！重要。 /*丸い角*/
            Box-Shadow：0 4PX 8PX RGBA（0、0、0、0.1）; /* 影*/
            バックグラウンドカラー：＃f8f9fa; /*明るい灰色の背景*/
            幅：200px！重要。 /*幅を固定*/
        }

        /*さまざまな状態またはスタイルの別のカスタムクラスを定義します*/
        .highlighted-select2 {
            バックグラウンドカラー：＃fff3cd！ /*警告色の背景*/
            ボーダーカラー：＃ffc107！重要; /*警告色の境界*/
        }

        /*サンプルページレイアウトスタイル*/
        体 {
            フォントファミリー：arial、sans-serif;
            マージン：20px;
        }
        .form-group {
            マージンボトム：20px;
        }
    </style>



    <h1> select2コンテナスタイルのカスタマイズチュートリアル</h1>

    <div class="form-group">
        <label for="my-input-select">オプションを選択：</label>
        <select id="my-input-rect" name="example-data" style="width：100％;">
            オプション1 
            オプション2 
            オプション3 
            オプション4 
        </select>
    </div>

    <div class="form-group">
        <label for="Another-Select">別のセレクター：</label>
        <select id="another-select" name="another-data" style="width：100％;">
            プロジェクト
            プロジェクトB 
            プロジェクトC 
        </select>
    </div>

    
        $（document）.ready（function（）{
            //最初のselect2を初期化し、カスタムクラス$（ "＃my-input-select"）を追加します。select2（{{
                contarecssclass： 'my-select2-container' //カスタムクラスを追加}）;

            // 2番目のselect2を初期化し、複数のカスタムクラスを追加します$（ "＃別の選択"）。select2（{{
                contarecssclass： 'my-select2-container highlighted-select2' //複数のカスタムクラスを追加}）;
        }）;
    

上記の例：

1. 2つのCSSクラスを定義します：.my-select2-containerと.highlighted-select2は、それぞれ境界、丸い角、影、背景色を設定します。
2. $（ "＃my-input-select"）。select2（{contarcssclass： 'my-select2-container'}）;、最初のselect2コンテナをmy-select2-containerクラスに適用しました。
3. $（ "＃別の選択"）。select2（{contarcssclass： 'my-select2-container highlighted-select2'}）;、2番目のselect2コンテナに2つのカスタムクラスを同時に適用しました。

このコードを実行すると、2つのselect2ドロップダウンメニューのコンテナの外観が変更され、定義したCSSスタイルに沿って変更されていることがわかります。

メモとベストプラクティス

• ！重要な使用法：！select2自体が優先度の高いインラインスタイルまたはデフォルトスタイルを追加するため、サンプルCSSで重要が使用されました。場合によっては、カスタムスタイルがselect2のデフォルトスタイルをオーバーライドできるようにするには、使用する必要がある場合があります。重要です。ただし、通常、重要なことを避け、代わりにより具体的なセレクターを介してスタイルの優先順位を高めることをお勧めします。
• IDとクラス：「カスタムID」は元の質問に記載されています。 Select2自体は、ContainerIDオプションを直接提供しません。スタイルコントロールの場合、CSSクラス（contarecssclass）を使用することは、複数のSelect2インスタンスに同じスタイルを適用できるため、CSSの設計哲学に沿っているため、より柔軟で推奨されるアプローチです。 IDを介してselect2コンテナを正確に制御する必要がある場合（たとえば、特定のJavaScript操作の場合）、Select2初期化が完了した後、JavaScriptを介して生成されたコンテナ要素を取得し、IDを手動で追加できます。例えば：

   $（ "＃input_16"）。select2（）;
  // select2で生成されたコンテナを取得し、IDを追加します
  $（ "＃input_16"）。

  ただし、このプラクティスは通常、スタイルの目的では使用されておらず、Select2内部ロジックと競合する可能性があり、注意して使用する必要があります。

• DropDowncssclass ：contarcssclassに加えて、select2は、ドロップダウンメニューのスタイルをカスタマイズするためのDropdownCSSCLASSオプション（つまり、オプションリスト）も提供します。これは、コンテナのスタイルとドロップダウンリストをそれぞれ制御するActincssclassの2つの異なる概念です。
• セレクターの優先順位：カスタムクラスがSelect2のデフォルトクラス（Select2-Container-Defaultなど）と競合する場合、CSSルールがデフォルトスタイルをオーバーライドするのに十分な優先度を持っていることを確認します。

要約します

cantaprercssclass構​​成オプションを備えたselect2は、コンテナのスタイルをカスタマイズするためのシンプルで効率的な方法を提供します。開発者は、この機能を利用して、Select2コンポーネントをさまざまなデザインスタイルのアプリケーションに簡単に組み込んで、高度にパーソナライズされたユーザーインターフェイスを実現できます。このオプションを理解して使用すると、Select2を使用すると柔軟性と効率が大幅に向上します。

以上がSelect2コンテナスタイルのカスタマイズ：カスタムCSSクラスを追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。