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

Question

我来自Semantic UI，我正在尝试做与此相同的事情。

所以这是我的 Bulma 代码

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

- wayneloo

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>

- Mayur Rawte

Answer 2

你可以通过向选择标签添加 颜色助手（例如 has-background-light）来更改背景。

<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 class="has-background-light">
        <option>.com</option>
        <option>.edu</option>
      </select>
    </div>
  </div>
</div>

您需要为图标编写自己的CSS。

- Sheedo