Touch devices: show styled trigger but use browser's default UI to select an option

[stevepiron]

I want to display my "fancified" selects but keep the default UI of the browser for users browsing my website on touch devices (smartphones, tablets etc.). I'm not really asking how to detect touch devices (I know it's possible through userAgent tests or with the help of Modernizr) but more about how can I fancify my selects without triggering the custom options list.

Thank you very much for your time and help with this!

[nesliahir]

+1 Maybe an option for selecting the default ui or the defined styles by the plugin?

[danimalweb]

+1 For this too.

[nmquebb]

+1 Looking forward to this feature

[jameshobbs]

+1 This would be a great addition

[paulstraw]

This is actually supposed to be be the behavior on mobile (styled button, system dropdown). Looks like it might be a regression; I'll have to check it out.

[stevepiron]

I've been thinking about a workaround and just tried it in a project:

The trick is to fancify <select> only on computers, and use default CSS styles for mobile devices. It's not the best looking (as it's impossible to have ::before and ::after pseudo-elements and browsers render selects as wide as the widest <option>) but it works: it shows a styled (to an extent) select and triggers the default OS UI. If I want specific selects to be fancified on mobile devices, I add a .force-styling class to them.

All selects have the class .custom-select to them (you could use another if you wish, but write your JavaScript accordingly).

Here's the JavaScript:

// ------------------------------------------------------------
// Mobile detection
// ------------------------------------------------------------

// Based on http://stackoverflow.com/a/3540295/2461659
function mobileDetection ()
{
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
    {
        return true;
    }
    else
    {
        return false;
    }
}


// ------------------------------------------------------------
// FancySelect
// ------------------------------------------------------------

var $custom_selects = $('.custom-select'),
    $force_styling = $('.force-styling');

/**
 * 1. Fancify selects on computers only
 * 2. Force styling on mobile devices
 **/
if(!mobileDetection()) // [1]
{
    $custom_selects.fancySelect();
}
else // [2]
{
    $force_styling.fancySelect();
}

[pgia]

We managed to make a work around for this by making a customization on fancySelect.js. Currently, we are using version 1.0.0, and we navigate to the block where the event "click.fs" on the li element (the user's choice) is caught:

options.on('click.fs', 'li', function(e) {
        ...
        return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs');
}

Seems like the event 'focus.fs' on the select element is responsible for the trigger of the native ios select menu popup, so we replaced this line with the following:

if (!isiOS) {
        return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs').trigger('focus.fs');
}
return sel.val(clicked.data('raw-value')).trigger('change.fs').trigger('blur.fs');

Horray!!! It works!

We advise the fancySelect dev guys to include this on the next release, as we observed that in the version 1.1.0 the issue still remains.