How to detect if mobile browser will show a "native" dropdown control?

Question

I would like to check whether a browser is going to show a special "native" style dropdown (such as the iPhone and iPod) without checking specifically by browser name. Is it possible to check for that capability in a more generic way without looking at the user agent by name?

I'd like to do this to determine whether to render a standard or more enhanced dropdown control.

Allhallowtide

Are you referring to how mobile browsers render HTML select -inputs? What is your definition of "special" here? – Bitthia

Ah yes,. Like the iPhone select input control. Basically wondering if there's a way to detect if a browser doesn't render the select inline and pops up its own special control. Thanks. – Allhallowtide

Did you find a solution to this? Maybe by looking at window.orientation? Maybe all those mobile devices nowadays do display a nice and usable native select (multiple or not) control? – Mulry

@Mulry have you had a look at this? htmlgoodies.com/beyond/webmaster/toolbox/article.php/3888106/… – Azral

Answer 1

I don't believe this is actually possible without a really poor solution. I bet the best way to go is to just detect the device because pretty much all mobile browsers use a native ddl for displaying options.

This can be achieved by using Modernizr's media queries and touch detection:

if (Modernizr.touch && Modernizr.mq('only screen and (max-width: 768px)') {
     //it is a mobile / tablet device
}

Or use regular CSS media queries.

Preconception

Answer 2

I'm an 90% sure of this answer: No.

You are looking to detect if you are on a browser that looks weird but you are defining weird subjectively. User Reda's answer is correct, but it violates part of your question (not to identify browsers by name). My point is that you need to identify the browsers by name because you're qualifier is subjective, so you won't find a JS/CSS test for it.

Browsers have complete control over what dropdown they show. Most are inconsistent with their implementation of CSS on these dropdown components. There are no standards saying a browser needs to expose any information about the dropdown at the application level.

To affect what you want, you need to find the browsers whose dropdown controls you don't like and list them out, and target them via Modernizr or other such trickery. Unfortunately that violates your question's intent, so I think the answer to your actual question is... no, sorry.

Strader

Answer 3

I'm currently checking for the existence of window.orientation and it seems to do the job for android and ios.

Mulry

quick and dirty but it does the job if you don't want to add a dependency on Modernizr – Orren

Answer 4

You can check the appearance css property

  -webkit-appearance: none;
  -moz-appearance:    none;
   appearance:        none;

and if it is not 'none' then your input has native styling.

You can find the possible values of appearance here: https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance and here http://trentwalton.com/2010/07/14/css-webkit-appearance/

Thymelaeaceous

Answer 5

As i read this question i got an idea for a dirty solution. Just a guess but maybe it helps:

Place your native element into the HTML and try get it in JavaScript with the elementFromPoint function. (MDN link)

If you get no element or the returned element is not your native one you know it is not displayed.

Lyso

Answer 6

try something like this

 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        $('#SOMEselectpicker').selectpicker('mobile');
    }

Leopoldeen