Выберите поле ввода, выглядящее по-другому в iphone 7 plus

Question

Я работаю над мобильным представлением веб-сайта , в котором поле ввода для выбора выглядит по-разному в iphone 7 plus по сравнению с другими телефонами.Я создал образец скрипта https://jsfiddle.net/mng5yk8L/5/embedded/result

HTML-код, который используется для создания поля ввода select:

<p>
    <input type="text" name="filter_29" id="search-box-filter_29" value="">
</p>

1-й снимок экрана:
Снимок экрана с полями select * , которые я вижу в мобильном представлении с моего ноутбука Windows в браузере Chrome:

2-й снимок экрана:
Снимок экрана с содержимым (которое я не хочу), которое я вижу из своегоТелефон Iphone 7 plus:

Постановка проблемы:
Мне интересно, какие изменения необходимо внести вcss, чтобы при открытии веб-сайта в мобильном режиме с iphone 7 plus он выглядел точно так же, как на первом снимке экрана.

Answer 1

select{-webkit-appearance: none;}

Добавление этого к любому из классов в вашем css должно устранить любые странные проблемы с сафари.Я обычно включаю его в свой селектор тела моего CSS