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

【问题标题】：Attaching a dropdown to text input using Bulma使用 Bulma 将下拉菜单附加到文本输入
【发布时间】：2018-08-01 15:51:00
【问题描述】：

我来自 Semantic 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？

【问题讨论】：

标签： css bulma

【解决方案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>

【讨论】：

【解决方案2】：

您可以通过将color helper（例如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。

【讨论】：