css - 使用 Bulma 将下拉菜单附加到文本输入

Question

我来自语义 UI，我正在尝试做同样的事情

所以这是我的布尔玛代码

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="field has-addons">
  <div class="control">
    <input class="input" type="text" placeholder="Find domain">
  </div>
  <div class="control">
    <div class="select">
      <select>
        <option>.com</option>
        <option>.edu</option>
      </select>
    </div>
  </div>
</div>

它看起来像这样

我想知道是否有人知道如何将下拉菜单设置为语义的 ui？Bulma 有没有办法更改选择输入和背景的图标，或者我必须编写自己的 css？

标签： cssbulma

Answer 1

您可以使用 bulma 下拉菜单和输入

<div class="dropdown is-active">
    <div class="dropdown-trigger">
        <div class="field">
            <p class="control is-expanded has-icons-right">
                <input class="input" type="search" placeholder="Search..."/>
                <span class="icon is-small is-right"><i class="fas fa-search"></i></span>
            </p>
        </div>
    </div>
    <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
            <a href="#" class="dropdown-item">Dropdown item</a>
            <a href="#" class="dropdown-item">Other dropdown item</a>
            <hr class="dropdown-divider">
            <a href="#" class="dropdown-item">With a divider</a>
        </div>
    </div>
</div>