html - 具有三个输入的搜索栏不起作用？

Question

我需要从这个站点创建相同的搜索栏 here .

如您所见，有一个输入字段，用户可以在其中输入他要搜索的任何内容。然后有一个带有一些选项的下拉菜单。最后还有一个搜索按钮。因为我需要重新创建它，所以我放弃了 html 和 css 代码，但没有达到相同的结果。就我而言，我无法摆脱下拉默认边框。我走到了死路，不知道如何解决这个问题。

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

.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 来完成。其余的纯粹是风格选择，以匹配您想要的外观。

我所做的两个主要更改是下面代码段中的两个顶级类。

Bootstrap 干扰了您复制的样式。一定要注意specificity .

至于fontawesome，您不能将fa fa-icon 类添加到伪 元素，因此您可以这样做.您手动分配字体系列并使用 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>