display all option in select without click - html

Question

guys i need your litle help i want to make select that show all option without to click select, i try add "multiple" but when i try in mobile display go wrong
this is what i want in front-end to mobile device
but on mobile
here is my code
<style>
select {
background-color: transparent;
border: none;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14;
cursor: inherit;
line-height: inherit;
outline: none;
text-align: center;
height: 90;
}
select option {
margin-top: 10;
}
</style>
<div class="select m-auto">
<select id="standard-select" name="bahasa" multiple>
<option value="id">Bahasa Indonesia</option>
<option value="en">Inggris</option>
<option value="viet">Vietnamese</option>
</select>
</div>

Answer 1

do be aware that size or multiple is not respected by mobile devices, but it works fine on desktops
you can try - overflow:auto;
select {
background-color: transparent;
border: none;
margin: 0;
width: 100%;
font-family: inherit;
font-size: 14;
cursor: inherit;
line-height: inherit;
outline: none;
text-align: center;
overflow:auto;
}
<div class="select m-auto">
<select id="standard-select" name="bahasa" multiple>
<option value="id">Bahasa Indonesia</option>
<option value="en">Inggris</option>
<option value="viet">Vietnamese</option>
</select>
</div>

Answer 2

Dynamically setting the label attribute would be enough for all iOS versions to display the control label. Turns out this depends on the iOS version.
you not setting innerText on iOS 7-9, but iOS 10 & up requires innerText to be set for the label to display.
required iOS 10 & up
let option = document.createElement('option');
option.label = option.innerText = 'option label';
option.value = '123';
not required on iOS 7-9
var option = document.createElement('option');
option.label = 'option label';
option.value = '123';