Почему стилизация select отличается в браузерах?
Так 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> |
<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; } |
.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
Дополнительно:
Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.
Для стилизации можете воспользоваться например select2
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Стилизация элементов формы, таких как select, может отличаться в разных браузерах из-за различий в реализации CSS и стандартов HTML каждым из них.
Прежде всего, стандартные элементы формы, такие как select, имеют свои собственные стили, заданные браузером по умолчанию. Эти стили могут быть разными в разных браузерах, что приводит к различиям в отображении элементов формы.
Кроме того, некоторые браузеры могут применять собственные стили к элементам формы для улучшения пользовательского опыта или для соблюдения своих дизайнерских принципов. Например, браузеры могут добавлять дополнительные элементы, такие как стрелки или фоны, к элементам формы для улучшения внешнего вида.
Для решения проблемы с отличающейся стилизацией select в разных браузерах, можно использовать специальные CSS фреймворки, такие как Bootstrap или Foundation, которые предоставляют единообразные стили для элементов формы. Также можно написать собственные стили, используя CSS, чтобы задать желаемый внешний вид элемента формы вне зависимости от браузера.
Например, если вам не нравится стандартный вид выпадающего списка в браузере, вы можете задать собственные стили для элемента select, например:
select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: #fff; border: 1px solid #ccc; border-radius: 5px; padding: 5px; width: 200px; }
Этот код убирает стандартную стилизацию элемента select и задает ему желаемый внешний вид. Таким образом, вы можете контролировать отображение элементов формы в разных браузерах, чтобы они выглядели одинаково или соответствовали вашему дизайну.