Attaching a dropdown to text input using Bulma

Question

I'm coming from Semantic UI and I'm trying to do the same as this

So here is my code for 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>

and it looks like this

I was wondering if anyone knows how can I style the dropdown to be like semantic's ui? Is there a way in Bulma to change the icon for select input and the background or I have to write my own css?

Faliscan

Answer 1

You can use bulma dropdown along with input

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

Subdivision

Answer 2

You can change the background by adding a color helper (e.g. has-background-light) to the select tag.

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

You'd have to write your own css for the icon.

Peluso