편집 가능한 드롭 다운이 구체화 된 CSS

Question

materializecss을 사용해야하는 프로젝트에서 작업 중입니다.

원래 부트 스트랩을 사용했을 때 편집 가능한 드롭 다운/선택 상자를 만들 수있었습니다. https://codepen.io/cfmatre/pen/LGOdjq

에서이 당신이 드롭 다운을 만들 수 있습니다 실현 : 다음은 그 예제 코드

<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> 

는하지만이 수동으로 부트 스트랩 예처럼 편집 할 수 없습니다.

실체화가이를 지원합니까? 아니면 동일한 작업을 수행하는 쉬운 방법이 있습니까?

업데이트 : 그것은 여기, 이미 목록에 태그를 대체 보인다 라이브 코드의 조각이다 : 당신이 읽기 전용으로 입력 상자를 설정 볼 수 있듯이

<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 요소는 브라우저 크롬이 아닌 운영체제의 일부이므로 스타일을 결정하기가 매우 어렵고 어쨌든 시도해 보는 것이 의미가 없습니다."

스타일을 선택 형성하기 위해 아래 링크를 따르십시오 : 그것은 사용자 정의에 관해서

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

Answer 2

선택 태그 매우 제한됩니다, 그들은이 스타일하는 방법에 대한 브라우저의 자비에 있습니다.

제공 한 codepen 예제는 목록을 사용하고 jQuery와 함께 작동합니다.