输入看起来小于select但具有相同的填充

Question

我有一个输入和一个选择元素彼此相邻。两个元素的填充均为15px，但输入比选择元素略小。你知道为什么吗？在chrome工作正常。

以下是一个示例：https://jsfiddle.net/4bf50bt0/。

HTML：

<form class="Banner__search_form">

  <input type="text" value="Search">
  <select>
    <option selected>Title</option>
  </select>

  <select>
    <option selected>Subtitle</option>
  </select>


</form>

的CSS：

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  outline: 0;
  border-radius: 0;
}


input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;

}

select,
input,
button {
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.Banner__search_form{
  display: flex;
  align-items: center;
}

Answer 1

您可以为它们定义一个公共固定高度，例如：

input,
select,
textarea,
button {
  padding: 15px;
  width: 100%;
  height: 5em;
}

https://jsfiddle.net/hL614er9/