Give a <select> element a different look, but still retain all OS benefits of using a real <select> (full screen height options list, keyboard navigation, etc.)

fauxSelect.js

    // Make faux dropdowns show their new value, when it's changed.
    $(document.body).on('change', '.faux-select-wrapper select', function(e) {
        var select = $(e.target);
        $.fn.fauxSelect.refresh(select);
    });
    $.fn.fauxSelect = function(method) {
        var select = this;

        // if fauxSelect is being called again on an already-handled element, then just update the
        // visible text
        if (select.parent().is('.faux-select-wrapper')) {
            $.fn.fauxSelect.refresh(select);
            return;
        }

        var wrapper = $('<div class="faux-select-wrapper">');
        var chosen = select.find('option:selected');
        if (!chosen.length) chosen = select.find('option:first');
        var fake = $('<div class="faux-select">').text(chosen.text()).appendTo(wrapper);
        ['font', 'color'].forEach(function(prop) {
            fake.css(prop, select.css(prop));
        });
        fake.css('line-height', (select.height() - 1) + 'px');
        fake.height(select.outerHeight());
        fake.width(select.outerWidth());
        select.before(wrapper).appendTo(wrapper);
    };
    $.fn.fauxSelect.refresh = function(select) {
        var wrapper = select.parent(),
            fake = wrapper.find('.faux-select');
        fake.text(select.find('option:selected').text());
    };

fauxSelect.less

.faux-select-wrapper {
    position: relative;
    select {
        opacity: 0;
    }
    .faux-select {
        display: block;
        position: absolute;
        top: 0;
        color: #555;
        padding-left: 8px;
        .box-sizing(border-box);
        border: solid 1px #ddd;
        border-radius: 5px;
        background: white;
        pointer-events: none;
        overflow: hidden;
        &:active {
            border-color: blue;
        }
        &::before {
            content: '▾';
            float: right;
            margin-right: 5px;
            color: #999;
        }
    }
}