搜索栏有三个输入，不能正常工作吗？

Question

我需要从该网站here创建相同的搜索栏。

如您所见，有一个输入字段，用户可以在其中输入他要搜索的内容。然后是带有某些选项的下拉列表。最后是一个搜索按钮。由于需要重新创建该代码，因此我废弃了html和css代码，但未实现相同的结果。就我而言，我无法摆脱下拉默认边框。我走上了一条死路，不知道如何解决这个问题。

我不知道的另一件事是，他们在该站点的css中拥有font-family: 'fontawesome';。我从来没有像那样使用过很棒的字体。我总是在fa fa-icon文件中使用html。

.header-middle {
  margin: 30px auto;
}

#header-search>.form-control.input-lg {
  border: 2px solid #eeeeee;
  border-right: none;
  background: #ffffff;
  color: #888888;
  font-size: 13px;
  padding: 3px 12px;
  height: 38px;
  width: 300px;
}

.select-wrapper {
  background: #ffffff;
  width: 155px;
  height: 38px;
  position: relative;
  float: left;
  border: 2px solid #eeeeee;
  border-left: none;
  border-right: none;
}

.select-wrapper::before {
  border-left: 1px solid #e5e5e5;
  content: '';
  height: 25px;
  position: absolute;
  left: 0;
  right: auto;
  top: 6px;
  z-index: 9;
}

.header-middle .input-group .form-control .inner-search {
  background: #ffffff;
  border: none;
  text-transform: capitalize;
  width: 100%;
  height: 100%;
  padding: 7px 18px;
  font-size: 12px;
  color: #666666;
}

#header-search .select-wrapper::after {
  content: '\f107';
  font-family: 'fontawesome';
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  position: absolute;
  right: 22px;
  left: auto;
  top: 9px;
  z-index: 9;
  color: #666666;
}

.select-wrapper::after {
  content: '\f107';
  font-family: 'fontawesome';
  position: absolute;
  right: 10px;
  top: 6px;
  pointer-events: none;
}

#header-search span.input-group-btn {
  float: left;
  width: auto;
}

.header-middle #header-search .btn-default {
  background: #111111;
  border: 1px solid #111111;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 13px 25px;
  margin: 0 !important;
  height: auto;
  line-height: 10px;
  text-transform:
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-7 header-middle">
  <div id="header-search" class="input-group">
    <input type="text" name="search" value placeholder="Search" class="form-control input-lg">
    <div class="select-wrapper">
      <select name="category_id" class="form-control inner-search">
        <option value="0">Categories</option>
        <option value="20">Grocery</option>
        <option value="28">Laptops</option>
      </select>
    </div>
    <span class="input-group-btn">
      <button type="button" class="btn btn-default btn-lg header-search-btn">
        Buscar
      </button>
    </span>
  </div>
</div>

Answer 1

要实现的大多数目标都可以通过将appearance属性设置为none来完成。其余的纯粹是样式选择，可以满足您的期望外观。

我进行的两个主要更改是下面的代码片段中的两个顶级类。

引导程序正在干扰您复制的样式。确保注意specificity。

对于fontawesome，您不能将fa fa-icon类添加到pseudo元素中，所以这就是您的做法。您手动分配字体系列，然后使用content属性选择一个字形。

#header-search select {
  font-size: 0.8rem;
  border: none;
  outline: none;
  background: transparent;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
}

#header-search button {
  border-radius: 0 .3rem .3rem 0;
}

.header-middle {
  margin: 30px auto;
}

#header-search>.form-control.input-lg {
  border: 2px solid #eeeeee;
  border-right: none;
  background: #ffffff;
  color: #888888;
  font-size: 13px;
  padding: 3px 12px;
  height: 38px;
  width: 300px;
}

.select-wrapper {
  background: #ffffff;
  width: 155px;
  height: 38px;
  position: relative;
  float: left;
  border: 2px solid #eeeeee;
  border-left: none;
  border-right: none;
}

.select-wrapper::before {
  border-left: 1px solid #e5e5e5;
  content: '';
  height: 25px;
  position: absolute;
  left: 0;
  right: auto;
  top: 4px;
  z-index: 9;
}

.header-middle .input-group .form-control .inner-search {
  background: #ffffff;
  border: none;
  text-transform: capitalize;
  width: 100%;
  height: 100%;
  padding: 7px 18px;
  font-size: 12px;
  color: #666666;
}

#header-search .select-wrapper::after {
  content: '\f107';
  font-family: 'fontawesome';
  font-size: 12px;
  font-weight: bold;
  pointer-events: none;
  position: absolute;
  right: 22px;
  left: auto;
  top: 9px;
  z-index: 9;
  color: #666666;
}

.select-wrapper::after {
  content: '\f107';
  font-family: 'fontawesome';
  position: absolute;
  right: 10px;
  top: 6px;
  pointer-events: none;
}

#header-search span.input-group-btn {
  float: left;
  width: auto;
}

.header-middle #header-search .btn-default {
  background: #111111;
  border: 1px solid #111111;
  color: #ffffff;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 13px 25px;
  margin: 0 !important;
  height: auto;
  line-height: 10px;
  text-transform:
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-7 header-middle">
  <div id="header-search" class="input-group">
    <input type="text" name="search" value placeholder="Search" class="form-control input-lg">
    <div class="select-wrapper">
      <select name="category_id" class="form-control inner-search">
        <option value="0">Categories</option>
        <option value="20">Grocery</option>
        <option value="28">Laptops</option>
      </select>
    </div>
    <span class="input-group-btn">
       <button type="button" class="btn btn-default btn-lg header-search-btn">
           Buscar
       </button>
    </span>
  </div>
</div>