html - 将样式添加到 Bootstrap 表单

Question

我在 Bootstrap 上有选择表单，我需要添加样式并使其如下图所示。请检查下面的 html 和 css 以获取此图像格式:

在图像上形成 html:

<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%);  
}

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

我已经为图像上的表单添加了样式。但是如何将它添加到我的选择表单中呢？

Answer 1

您所要做的就是删除 <div> 之间的所有内容就在你体内的标签 <section>标签。我相信它应该看起来像这样。

  <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>
        </div>
      </section>