Добавление стилей в bootstrap форму

У меня есть selection форма на Bootstrap. Мне нужно добавить для этой формы стили, чтобы она была такой же как на картинке ниже. Ниже привел код html и css для формы на картинке.

image

html форма для картинки:

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <form method="POST" action="/identify">  
      <div class="wrap">
         <div class="search">
            <input type="text" id="value"  multiple="multiple" class="searchTerm" name="value" placeholder="Type your values">
            <datalist id="val">
                <option value="val">val</option>
            </datalist>
            <button type="submit" class="searchButton" name=form>
              <i class="fa fa-search"></i>
            </button>
         </div>
      </div><br>
    </form>

css форма для картинки:

.search {
  width: 100%;
  position: relative;
  display: flex;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 50px;
  border-radius: 0;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 60px;
  height: 66px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}

.wrap{
  display: none;
  width: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
}

код selection формы на bootstrap:

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

      <section>
        <div class="container h-100">
  <div class="wrap">
     <div class="search">
          <form action="/action" method="POST" class="form-inline">
            <select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
              <option value="value">value</option>
              <option value="value">value</option>
              <option value="value">value</option>
            </select>
            <button type="submit" class="btn btn-primary mb-2">Select</button>
          </form>
</div>
</div>
          <script type="text/javascript">
            $('select').selectpicker();
          </script>
        </div>
      </section>

Я добавил код стилей для формы, которая на картинке. А как сделать для select формы? Я делал просто copy-paste, но ничего не проходит. Можете показать как это сделать?


Ответы (0 шт):