Почему на ios разный select?
ios -
pc, android -
Пробовал добавлять -webkit-appearance: none;, от части помогло только на select, а вот на Input(там где слово "текст", filter-2 input) - не помогло, на ios он длиннее, а на пк и андроиде - он нормальный. Плюсом к этому - у select пропал значок выпадающего списка (стрелка вниз)
.filter { display: flex; } .filter-1 select:nth-child(1) { width: 391px; height: 70px; border-radius: 20px 0px 0px 20px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(2) { width: 259px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(3) { width: 392px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(4) { width: 598px; border-radius: 0px 20px 0px 0px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-2 input { width: 807px; height: 67px; -webkit-appearance: none; border-radius: 0px 0px 0px 20px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); color: var(--2-black, #2C2A3B); font-family: Manrope, sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 30px; } |
.filter { display: flex; } .filter-1 select:nth-child(1) { width: 391px; height: 70px; border-radius: 20px 0px 0px 20px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(2) { width: 259px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(3) { width: 392px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-1 select:nth-child(4) { width: 598px; border-radius: 0px 20px 0px 0px; height: 70px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); } .filter-2 input { width: 807px; height: 67px; -webkit-appearance: none; border-radius: 0px 0px 0px 20px; border: 1px solid var(--gray, #777C86); background: rgba(255, 255, 255, 0.20); color: var(--2-black, #2C2A3B); font-family: Manrope, sans-serif; font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; padding-left: 30px; }
Дополнительно:
напиши 1 раз селект с нуля на дивах, и юзай его везде где хочешь, займёт в принципе минут 30 с версткой, они не сложные
Ответы:
Селект — это один из самых сложных компонентов для реализации и кастомизации. Не получится нативными средствами сделать селект, который будет везде выглядеть одинаково. Нужно делать кастомный.
Можно взять готовый, благо библиотек сейчас предостаточно.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
На iOS устройствах различается отображение элемента select по сравнению с другими операционными системами из-за специфического способа реализации выпадающего списка на устройствах Apple. iOS использует свой собственный стандартный элемент select, который отличается от стандартного элемента, используемого на других платформах.
Это может привести к тому, что элемент select на iOS будет выглядеть и вести себя по-другому, чем на других устройствах. Например, на iOS элемент select может иметь другой стиль оформления, другую анимацию открытия и закрытия списка, а также другие визуальные особенности.
Если вам необходимо обеспечить единообразное отображение элемента select на всех устройствах, включая iOS, вы можете использовать различные методы и техники CSS, JavaScript или фреймворков для кастомизации элемента select. Например, вы можете использовать специальные библиотеки или плагины, которые позволяют стилизовать элемент select по вашему желанию и обеспечить единообразный вид на всех платформах.
Также стоит учитывать, что различия в отображении элемента select на разных устройствах могут быть вызваны не только особенностями iOS, но и различиями в браузерах, версиях операционных систем и другими факторами. Поэтому при разработке веб-приложения необходимо тестировать его на различных устройствах и браузерах, чтобы обеспечить корректное отображение и работу элемента select на всех платформах.
Надеюсь, данное объяснение поможет вам понять причины различий в отображении элемента select на iOS устройствах и поможет вам найти подходящее решение для вашего проекта. Если у вас возникнут дополнительные вопросы или потребуется дополнительная помощь, не стесняйтесь задавать их.