2016-11-28 74 views
0

我呈現下拉搜索輸入這樣的:語義UI下拉圖標沒有

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

它創建標準SemanticUI下拉菜單輸入。

是否有可能告訴語義不渲染任何圖標或在輸入字段中呈現不同的圖標?

回答

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

+1

這是很好的答案,但是我有小問題,我的下拉輸入元素現在使用不同的樣式。我剛剛使用您提供的HTML示例更改了我以前的代碼。http://i.imgur.com/SLSYHJ0.png – Kunok

+0

@Kunok我已經在我的示例中添加了搜索下拉菜單,它應該是類似的,但有些類需要更改,請檢查出來,並讓我知道它是否有幫助。 –

+0

非常感謝您的努力,這正是我所需要的! – Kunok