В поле выбора HTML не отображается стрелка раскрывающегося списка на Android версии 4.0 при установке цвета фона

Мне нужно установить цвет фона для окна выбора как желтый. Когда я тестировал, он показывает коробку с желтым цветом и стрелкой на Android 2.3 и Android 3.0.

Но на android 4.0 он показывает, что выбрать полный желтый цвет без стрелки раскрывающегося списка.

Любая идея, как решить проблему?

Я проектирую это с телефонным зазором.

Это мой код, где я устанавливаю background-color для выбора html.

<select style="background-color:#FFFF00;border:#FFFF00;height:25px;font-family:Arial, Helvetica, sans-serif; color:#000000; font-size:14px; font-weight:bold; text-align:center;">
          <option></option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>

        </select>

Ответы

Ответ 1

Отслеживание Android-браузера <select> является ошибкой и удалит нормальный стиль, если применяется фон или рамка.

Так как <select>, не похожий на <select>, является довольно большой проблемой юзабилити, лучше всего не создавать стиль для этого браузера.

К сожалению, нет чистого CSS-способа для выбора/исключения Android-браузера, поэтому я рекомендую использовать Layout Engine (https://github.com/stowball/Layout-Engine), который добавит класс .browser-android в тег <html>.

Затем вы можете создать стиль <select>, за исключением Android-браузера, например:

html:not(.browser-android) select {
    background: #0f0;
    border: 1px solid #ff0;
}

Ответ 2

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

При попытке узнать больше о Bootstrap и Foundation Framework я нашел решение на начальной загрузке, поскольку они подняли эту проблему на каком-либо мобильном устройстве, если мы указали границу или фон для выпадающих списков.

Я не беру кредит от кого-либо, но хотел бы поделиться ссылками на страницу, где он упоминается, и решение также предоставляется

Bootstrap: http://getbootstrap.com/getting-started/

JS Bin: http://jsbin.com/OyaqoDO/2

Я надеюсь, что это будет полезно другим, кто может столкнуться с этой проблемой, это решение связано с загрузкой. и может ли я изменить ваши потребности в проекте.

<script>
var nua = navigator.userAgent;
var is_android = ((nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1) && !(nua.indexOf('Chrome') > -1));
if(is_android) {
        $('select.form-control').removeClass('form-control').css('width', '100%');

}
</script>

Ответ 3

что-то вроде этого может работать, чтобы пересчитать мгновение после того, как наружный вес детей был неправильным в андроиде в то время (как я упоминал ранее).

window.setTimeout(function() {$(window).trigger('resize');}, 1500);

... может работать? Да, это помогает.

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

Ответ 4

Как указал Мэтт, если вы применяете какой-либо тип границы или фона к меню, вы будете испарять стрелку вниз.

Простое решение, просто удалите любой пограничный или пользовательский цвет фона. Это оставит вас с красивой белой и серой "современной" стрелкой вниз на устройствах Android. Я не думаю, что есть какие-то сайты, на которые он не подходит.

Ответ 5

Если вы не хотите использовать JavaScript для этого и/или просто плохо себя чувствуете в том, что обнюхиваете UA (как и должно быть), но все в порядке с меньшим таргетингом на несколько браузеров:

select
{
    /* common, "safe" styles */
}
@supports (appearance: none)
{
    select
    {
        /* borders and backgrounds */
    }
}

Заметные отсутствующие - это все IE (Edge получит полные стили): http://caniuse.com/#feat=css-featurequeries