Safari изменить выбрать высоту

Question

Я не могу изменить selectheight, со всеми браузерами работает нормально, но Safari нет, где могут быть проблемы? Также я пытаюсь сделать класс .style select, но не работает.

select {
width: 170px; 
height: 25px;
}

Answer 1

Попробуйте добавить это:

-webkit-appearance: menulist-button;

Answer 2

Чтобы стилизовать выделение в Safari, сначала нужно отключить стиль o s:

-webkit-appearance: none;

Answer 3

Вы также можете использовать

line-height: 25px

который не влияет на другие браузеры, но исправляет эту ошибку в Safari

Answer 4

Лучше всего использовать детектор модернизатора и дать меню выбора класса сафари

line-height: 20px;

или вы можете использовать меню выбора jquery UI, чтобы решить эту проблему другим кросс-браузерным способом.

Answer 5

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {
        -webkit-appearance: menulist-button !important;
        line-height:24px !important;
    }
}

Этот код обеспечивает одинаковую высоту во всех браузерах.

Answer 6

По крайней мере, на iPad выбор не отображается для отступа или высоты строки, но вместо этого будет отображать заданную высоту и центрировать по вертикали значение

select {
   -webkit-appearance:menu-item; // or menulist-button
   -moz-appearance:menu-item;
   height:2.4em;   // this must be calculated to match other input types     
}

input[type="text"], select {
    min-width:12em;  
    border-radius:5px;
}

единственное, что сейчас не решено, это предопределенный и неизменный фон

Answer 7

@media screen and (-webkit-min-device-pixel-ratio:0) { select { -webkit-appearance: menulist-button !important; line-height:24px !important; } }

Дать line-height согласно вашему требованию

Answer 8

Вот как я решаю это в 2022 году:

      select, input {
    font-size: 14px; //or whatever
    height: 3em;
    line-height: 3em;
    padding: 0; //top and bottom must be 0
    -webkit-appearance: none;
}

Answer 9

У меня ничего не получалось, пока я не использовал встроенный стиль:

<select name="pickupsel" id="pickups" style="line-height:33px">

Каким-то образом Safari (последняя версия Windows, 5.1.7) не читает это свойство стиля из файла CSS.

Answer 10

Вот как я решаю это в 2022 году: