의미 UI 드롭 다운 아이콘

Question

없이 나는 다음과 같이 드롭 다운 검색 입력을 렌더링하고 있습니다 : 그것은 표준 SemanticUI 드롭 다운 입력을 생성

<div class="field"> 
    <label>Foo</label> 
    <select name="foo" class="ui search dropdown"> 
    <option value="">Choice</option> 
    </select> 
</div> 

.

아이콘을 렌더링하지 않거나 입력 필드에 다른 아이콘을 렌더링하도록 Semantic에 지시 할 가능성이 있습니까?

Answer 1

당신은 드롭 다운 메뉴를 만드는 다른 방법을 시도 할 수 있습니다 (이 $('.dropdown').dropdown();

에 의해 intialized해야합니다

$('document').ready(function() { 
 
    $('.dropdown').dropdown(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css"> 
 

 
<h2>Default</h2> 
 
<div class="ui dropdown"> 
 
    <div class="text">Foo</div> 
 
    <i class="dropdown icon"></i> 
 
    <div class="menu"> 
 
    <div class="item">Choice</div> 
 
    </div> 
 
</div> 
 

 
<h2>No Icon</h2> 
 
<div class="ui dropdown"> 
 
    <div class="text">Foo</div> 
 
    <div class="menu"> 
 
    <div class="item">Choice</div> 
 
    </div> 
 
</div> 
 

 
<h2>Custom Icon</h2> 
 
<div class="ui dropdown"> 
 
    <div class="text">Foo</div> 
 
    <i class="user icon"></i> 
 
    <div class="menu"> 
 
    <div class="item">Choice</div> 
 
    </div> 
 
</div> 
 

 
<h2>Search Input</h2> 
 
<p> 
 
    Same applies as above: Default, None or Custom icons are allowed 
 
</p> 
 
<div class="ui search selection dropdown"> 
 
    <input type="hidden" name="country"> 
 
    <div class="default text">Foo</div> 
 
    <div class="menu"> 
 
    <div class="item" data-value="af">Choice</div> 
 
    </div>

출처 : http://semantic-ui.com/modules/dropdown.html