android browser (webkit) select-multiple's items disappear when selected

Question

I have an issue with Android's webkit browser

Items in select-multiple disappear when they are selected

I couldn't find any solution on the web, neither nobody talking about this issue

I made the screenshots in my desktop OS just to demonstrate what's happening:

This is how it should appear:

Thank you in advance

Aklog

sadly no :( i will try again soon though... i didn't test -webkit-appearance:none... maybe it's the way – Aklog

also that failed, i also tried to change selected color with ::-webkit-selection with no luck – Aklog

This is very odd... again I will see if i have time to help you out since I might deal with a form in the near future for a responsive site. – Snocat

Answer 1

Try by removing the "border:solid 1px black"

Ylangylang

correction, it did work, but not the expected result. select works but looks like a select-one. it's just incredible they didn't test <select> (html 2) before putting the os on the market – Aklog

Answer 2

A fiddle would be nice.....I made one of my own (default i do for mobile).

I can't replicate your issue... I tested on both HTC X - One and Galaxy Note 3 using the default browser (I sued Chrome too) and no issue....Also you might want to add a selected target function like this:

$(function() {
    $('#yourid').change(function(e) {
        var selected = $(e.target).val();
        console.dir(selected);
    }); 
});

This makes thing neater for modal base.

FIDDLE

Snocat

you did 280+ tests?? you deserve the bounty only for this reason xD anyway must be system dependent. problem is that happens on 3 androids i have, if i don't add "border" the select is displayed as a select-one box. does this happen also to you? – Aklog

ha well @Wes I have Browserstack which I can test on many..I used your css with border...no issue..could be because of my selected function – Snocat

Answer 3

Here is a reference from the android issue tracker that addresses a similar issue

when we select any option from a SELECT tag having the attribute MULTIPLE, the choosen option becomes invisible

Seems like the select multiple doesn't support css.

Oppen