使用布尔玛将下拉列表附加到文本输入

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？在布尔玛中，有没有一种方法可以更改选择输入和背景的图标，或者我必须编写自己的CSS？

Answer 1

您可以通过在选择标签中添加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。

Answer 2

您可以将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>