Home > Net >  display all option in select without click
display all option in select without click

Time:09-22

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>

CodePudding user response:

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>

CodePudding user response:

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