Почему на ios разный select?

Question

[crack_user]

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;
}

Comments

[szQocks]

напиши 1 раз селект с нуля на дивах, и юзай его везде где хочешь, займёт в принципе минут 30 с версткой, они не сложные

[modelair]

ссылку давай

[modelair]

радиус у всего сбрось по нулям

[crack_user]

modelair, https://mtf.dance/rating

[crack_user]

szQocks, Попробую, спасибо

[Сергей delphinpro]

szQocks, ну про 30 минут с нуля вы загнули. Если полностью реализовывать поведение нативного селекта, то в полчаса не уложишься. Направление выпадающего списка вверх/вниз, клавиатурная навигация, мобильное представление и т.д...

[szQocks]

Сергей delphinpro, ну если полноценный, гибкий и т.д то да, явно 30 минут не хватит

Answer 1

[Антон Романков]

Селект — это один из самых сложных компонентов для реализации и кастомизации. Не получится нативными средствами сделать селект, который будет везде выглядеть одинаково. Нужно делать кастомный.
Можно взять готовый, благо библиотек сейчас предостаточно.