Блог

Главная - Вопросы по программированию - Стиль опций(собственного выбора) в css работает на настольных компьютерах/ноутбуках, но не работает на мобильных устройствах

Стиль опций(собственного выбора) в css работает на настольных компьютерах/ноутбуках, но не работает на мобильных устройствах

#android #html #css

Вопрос:

Это простой html css код с выпадающим списком. Выпадающий список отлично работает на рабочем столе, но стиль опций не работает на мобильных устройствах. Мне нужна выбранная опция, чтобы иметь серый фон и жирный шрифт. Когда он закрыт, он должен быть выделен курсивом.
Вот как выглядит select на рабочем столе(Примечание:стиль опций)
Это конечный результат, который я хочу, который работает на настольном компьютере, но не на мобильном

 <html>
<style>
    .mydropdown{
        border:none;
        border-bottom:2px dotted black;
        display:inline;
        min-width:200px;
        font-style: italic;
        font-weight: 600;
        cursor: pointer;  
        overflow: hidden; 
        background-color: lightgray;
    }
    .mydropdown:hover , .myoption:active , .myoption:checked{
        border:2px dotted #0D6EFD;
    }
    .myoption{
        font-style: normal;
        background-color: white;
    }
    .mydropdown .myoption:checked,
    .mydropdown .myoption:hover ,
    .mydropdown .myoption:active {
        background-color: lightgray;
        font-weight: 900;
     } 
</style>
<body>
<select class="mydropdown dropdown-toggle">
<option value="selans"  class="selans" >Select</option>
<option class="myoption">A</option>
<option class="myoption">B</option>
<option class="myoption">C</option>
<option class="myoption">D</option>
</select>
</body>
</html>

Комментарии:

1. Он отлично работает даже на мобильном экране.

2. какое мобильное устройство и какой браузер вы используете для этого тестирования? Или вы используете эмулятор?

3. Я использую телефон Android(один плюс 5 т)

Метки: ,