Android Dropdown (Выбрать) CSS

В настоящее время я пишу несколько стилей для мобильных браузеров и сталкиваюсь с необычной проблемой в браузере Android. При изменении атрибута CSS шрифта в текстовом поле коробка становится больше, чтобы разместить более крупный текст. Выполнение этого в окне выбора, однако, не изменяет размер поля выбора, но текст по-прежнему увеличивается (фактически перекрывая верхнюю и нижнюю часть отображаемого элемента формы).

Может ли кто-нибудь сказать мне, возможно ли увеличить высоту блоков выбора в браузере Android. Или, если не указать мне в сторону списка атрибутов CSS, которые могут быть применены к ним.

Спасибо.

ОТВЕТЫ

Ответ 1

Кажется, это ошибка браузера. Вы также можете воспроизвести его, когда размер текста вашего браузера задан как "огромный" (в настройках). Я добавил новую проблему и предлагаю обходной путь с пользовательским фоновым изображением:

<select style="background: url('big-select-bg.png')"/>

Ответ 2

Еще один вариант, который вы можете использовать (протестирован на галактике S, работающем под управлением Android версии 2.1-update1):

select {
    -webkit-appearance: listbox;
}
select, input {
    width: 100%;
    height: 40px;
    line-height:40px;
    border: 1px solid #999;
    border-radius: 6px;
    margin-bottom:10px;
}

Таким образом, входы и выбор всех выглядят одинаково, нажатие кнопки выбора открывает меню параметров, как обычно.

Ответ 3

попробуйте следующее:

select{

    -webkit-appearance: menulist-text;
}

Ответ 4

Установите непрозрачность элемента управления выбора на 0

Затем поместите контур contall, который будет выглядеть как текстовое поле за элементом управления select, чтобы элемент управления select находился непосредственно поверх диапазона.

Пользователь не увидит элемент управления select, но когда пользователь попытается ввести текст в диапазон, появятся варианты выпадающего списка для элемента управления.

После того, как пользователь делает свой выбор, используйте javascript для обновления innerHTML диапазона со значением элемента управления select.

Удостоверьтесь, что размеры пролета и линии выбора выбираются хорошо. (Не используйте фактический элемент управления texbox)

mealaroni.com

Ответ 5

Для меня "-webkit-appearance: listbox;" решить проблему не полностью.

Мне пришлось добавить дополнительный атрибут:

select {
    -webkit-appearance: listbox;
    width: 100%;
    height: 35px;
    line-height: 35px;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 0 0 1px 8px;
}