Почему стилизация select отличается в браузерах?

Question

[Дмитрий Ярощук]

Так select выглядит в google chrome:

Так select выглядит в Safari:

Почему не применяются стили к select в safari, как это исправить ?

<select name="product" required="" class="input">
   <option value="" selected="" disabled="">Выберете число</option>
   <option value="1">1 шт </option>
   <option value="3">3 шт - 480 (1+1=3)</option>
</select>

.newsletter-form form select {
    padding: 19px 25px;
    border: none;
    background: #edecec;
    font-size: 14px;
    width: 335px;
    margin-bottom: 15px;
    border-radius: 50px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

Ссылка на сам сайт stain-remover.testoys.website

Answer 1

[Sergey]

Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.

Для стилизации можете воспользоваться например select2