Desktop Friendly Multiple Dropdownlist While Keeping Smartphones Default Style

I have a basic HTML dropdownlist that's basically this: 0<

Solution 1:

Demo Fiddle

One option would be to use media queries to show a normal select box for android/mobile devices, then a replaced select box for desktop machines

HTML

<select id='mobile'>
    <option>Mobile Select Box</option>
</select>
<select id='desktop'>
    <option>Desktop Select Box</option>
</select>

CSS

#mobile {
    display:none;
}
#desktop {
    display:block;
}
@media (max-width: 600px) {
    #desktop {
        display:none;
    }
    #mobile {
        display:block;
    }
}

Share

Top Question

Disable Text Entry In

I am making a simple web app. At one part of it, I have inc…