display all option in select without click

user_13253302 0
Viewed 120

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>
frontend select css html
2 Answers

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>

user_128181540

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';
user_128181540
Related