編集可能なドロップダウンのマテリアライズCSS

Question

私はmaterializecssを使用する必要があるプロジェクトに取り組んでいます。

私がブートストラップを使用したとき、私は編集可能なドロップダウン/選択ボックスを作ることができました。ここではその例のコードは次のとおりです。

<div class="input-field col s12"> 
    <select multiple> 
     <option value="" disabled selected>Choose your option</option> 
     <option value="1">Option 1</option> 
     <option value="2">Option 2</option> 
     <option value="3">Option 3</option> 
    </select> 
    <label>Materialize Multiple Select</label> 
</div> 

しかし、これはあなたが手動でブートストラップの例のように編集することはできません：https://codepen.io/cfmatre/pen/LGOdjq

では、あなたがしてドロップダウンを作成することができマテリアライズ。

マテリアライズはこれをサポートしていますか、同じことをするための簡単な方法はありますか？あなたはそれが読み取り専用に入力ボックスを設定し、見ることができるように

<div class="select-wrapper"> 
    <span class="caret">▼</span> 
     <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" value="Choose your option"> 
    <ul id="select-options-0d9542b7-ca78-df34-51ab-f19edd342ec0" class="dropdown-content select-dropdown" style="width: 991px; position: absolute; top: 0px; left: 0px; display: none; opacity: 1;"> 
    <li class="disabled"><span>Choose your option</span></li> 
    <li class=""><span>Option 1</span></li> 
    <li class=""><span>Option 2</span></li> 
    <li class=""><span>Option 3</span></li> 
    </ul> 
<select data-select-id="0d9542b7-ca78-df34-51ab-f19edd342ec0" class="initialized"> 
          <option value="" disabled="" selected="">Choose your option</option> 
          <option value="1">Option 1</option> 
          <option value="2">Option 2</option> 
          <option value="3">Option 3</option> 
         </select></div> 

：

更新：すでにリストにタグを置き換えるようで、ここではライブコードのスニペットです。だから、私の場合、私は読んでいるのではなく、食べ物にする必要があります。

Answer 1

あなたのブートストラップコードはリストを使用し、materializecssはselectフォームを使用します。

選択フォームは難しく、スタイルは複雑です。

"select要素はブラウザのchromeではなく、オペレーティングシステムの一部です。したがって、スタイルを設定することは非常に信頼性が低く、とにかく試してみると意味がありません。スタイル選択フォームは下のリンクをたどるに

：

How to style a <select> dropdown with CSS only without JavaScript?

Answer 2

を選択したタグは、それがカスタマイズに来るとき、彼らは彼らのスタイルされている方法として、ブラウザのなすがままにされている非常に限られています。

あなたが提供したcodepenの例は、リストを使用しており、jQueryで動作します。