Question

我正在渲染下拉搜索输入，如下所示：

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

它创建标准的SemanticUI下拉输入。

是否有可能告诉Semantic不呈现任何图标或在输入字段中呈现不同的图标？

Answer 1

您可以尝试创建下拉列表的替代方法（这需要由$('.dropdown').dropdown();初始化

＆＃13;

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

＆＃13;

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

＆＃13;

来源：http://semantic-ui.com/modules/dropdown.html

没有图标的语义UI下拉列表

1 个答案: