Выберите элементы тегов, которые не отображаются на мобильном телефоне

Question

На рабочем столе мой выбор отображается нормально, но на мобильном телефоне отображается только граница, и когда вы щелкаете по ней, значение по умолчанию chrome на android просто выдает всплывающую кнопку c. Как я могу заставить браузер не делать этого? или, по крайней мере, чтобы мои товары снова показывались?

Любая помощь приветствуется.

<div style='display:flex;flex-direction:column;justify-content:space-evenly;height:100vh;position:absolute;right:0px;'>
    <form action="#" method="get">
    <select data-native-menu="false" id='type' name="type" size="3" style='overflow:hidden;background-color:transparent;width:40vw;height:50vh;'>
    <option value="Mahogony" class='item' >Mahogony</option>
    <option value="Pine" class='item'>Pine</option>
    <option value="Oak" class='item'>Oak</option>
    </select>
    </form>
</div>

css

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}
/*list box*/
select:focus {
outline: none;
}
select:focus:after {
display:none;
}
select{
outline:none;
background-color: transparent;
}
.item{
color:white;
font-size:2vw;
outline: none;
border: none;
}

.item:nth-child(2n+1){ background-color: rgba(127,127,127, 0.4);}
.item:nth-child(2n){background-color:rgba(127,127,127, 0.6);}
select{
font-family: Roboto;
}