Question: I have set up a [Chosen plugin](https://harvesthq.github.io/chosen/) for a select field for the user to be able to type-search from a long list.

Although I am developing this for mobile phones and while it works fine on computer, it is disabled on both Apple and Android phones and the default user interface pops up for the select input.

I'd like to use the plugin on phones.

Answer: 
`AbstractChosen.browser_is_supported` function does not allow you to use this plugin on mobile devices and internet explorer so you can hack this by yourself.

Find the below lines in `chosen.jquery.js` and comment this code. Now the chosen plugin will work on mobile devices. 

```
if (!AbstractChosen.browser_is_supported()) {
    return this;
}   
if (!AbstractChosen.browser_is_supported()) {
    return;  
}

```
Posting here as a fallback I've implemented as I was depending on the ChosenJS plugin to work so that custom CSS could be applied. Hopefully this helps someone else.

**Disclaimer:** The answer above by @dreamweiver should still be the accepted answer, given the question.

```
var chosenSelects = $('.ui-select').find('.chosen-select, [chosen]'),
    $select, $option;

if (chosenSelects) {
    chosenSelects.chosen();

    // Check for 'chosen' elements on mobile devices
    // -----
    // Given that ChosenJS has expressly been disabled from running
    // on mobile browsers, the styles have to be applied manually.
    // Source: https://github.com/harvesthq/chosen/pull/1388
    // -----
    // The code below gathers all 'chosen' selectors and adds
    // 'chosen-mobile' as a className. This className is then
    // used to apply the necessary styles for mobile browsers.
    // Within each select, if an 'option' has an empty value,
    // then that value will be given 'selected' and 'disabled'
    // attributes to act as a placeholder, adopting the text
    // in the 'data-placeholder' as the text to be displayed.
    if ( /iP(od|hone)/i.test(window.navigator.userAgent)
        || (/Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent)) ) {
        chosenSelects.each(function () {
            $select = $(this);
            $select.addClass('chosen-mobile');

            $select.find('option').each(function () {
                $option = $(this);

                if ( $option.val() == '' ) {
                    $option
                        .attr('selected', 'selected')
                        .attr('disabled', 'disabled')
                        .text( $select.data('placeholder') );
                }
            });
        });
    }
}

```

With this, I then use `.ui-select .chosen-mobile` to apply the CSS necessary.