Панель поиска с тремя входами не работает?

Question

Мне нужно создать такую ​​же строку поиска с этого сайта здесь .

Как видите, есть поле ввода, в котором пользователь будет вводить то, что ищет.Тогда есть выпадающий список с некоторыми опциями.И, наконец, есть кнопка поиска.Поскольку мне нужно воссоздать это, я удалил код 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.Остальные - чисто стилистические варианты, чтобы соответствовать вашему желаемому внешнему виду.

Два главных изменения, которые я сделал, - это два верхних класса в приведенном ниже фрагменте.

Bootstrap мешал вашим скопированным стилям.Убедитесь, что вы обращаете внимание на специфичность .

Что касается 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>