Detect if the browser has converted a select to a spinner?

Question

Some browsers, notably mobile phone browsers, replace select boxes with native spinner components. Is there a way to detect if the browser uses a spinner or a traditional select?

Answer 1

Short answer

You're not supposed to be able to.

Longer answer

When you deliver some HTML content, say:

<h1>Person Dies of Ebola</h1>

You should NOT think about that in the terms of "well, it's an <h1> tag, so the browser will make it bold and larger". That is not what the semantics mean.

<h1> is your way of telling the client browser "hey, this is a header level 1".

The browser may choose to present that to the user in certain ways, but that isn't really something you should rely on when writing your HTML.

When you have a <select> element, you're telling the client that you're about to describe some list of options where the user is expected to choose one.

It happens to be the case that popular browsers implement the interaction functionality for you, but that is not why you write something within a <select>. It's merely the browsers' way of trying to present your content to the client appropriately.

So, if you want to have specific interaction that you wish to implement, use JavaScript. Keep your HTML as is, but write JavaScript that manipulates the DOM and implements the interaction you wish to have.

But, in real terms...

You can probably use user-agent to detect what browser you're on and do stuff accordingly.

Here's a browser detection library that does some of that for you.