入力は選択よりも小さく表示されますが、同じパディングがあります

Question

私は入力と選択の選択要素が隣り合っています。どちらの要素も15pxのパディングがありますが、入力はselect要素より少し小さいです。なぜなのかご存知ですか？クロムでうまく動作します。ここで

例です：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

あなたは一例foは、彼らのために共通の固定の高さを定義することができます。

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

https://jsfiddle.net/hL614er9/