Поле ввода в Chrome и Firefox выглядит по-разному

Я тестировал в Chrome, он показывает хорошо, но в Firefox поле ввода больше, чем ожидалось.

Вот разметка:

<div class="form-wrapper">           
    <input type="search" name="Ofsearch"
            placeholder="Search here..." value=""/> 
    <button id="searchButton" type="submit">
        Search
    </button>
</div>

Вот стиль:

.form-wrapper {
     height: 80px;
     clear: both;
}

.form-wrapper input {
     border-radius: 10px;
     border: 5px solid #E5E4E2;
     margin: 2px;
     height: 40px;
     vertical-align: middle;
     padding: 20px;
     margin-top: 15px;
     width: 85%;
}

.form-wrapper button {
     overflow: visible;
     position: absolute;
     float: right;
     border: 0;
     padding: 0;
     height: 40px;
     width: 110px;
     border-radius: 0 3px 3px 0;
     margin: 20px -118px;
}

Вот пример в скрипке.

Как видно из примера, в Chrome и Firefox они отображаются в разных размерах.

Когда я проверил эту проблему, я обнаружил, что padding:20px в .form-wrapper input{ } вызвал эту проблему. Тем не менее, когда я удаляю его, Firefox показывает нормально, но область ввода становится меньше в Chrome. Просто интересно, любой способ сделать так, чтобы он отображался одинаково в обоих браузерах.