beautify-select.js

Since moden browsers cannot format options of select, so here is a tricky solution to enable it.

This solution is very tricky and smart, great idea comes from dkellner, check the link in bottom.

You can call your existing select by following method

    <link href="~/Content/beautify-select.css" rel="stylesheet" />
    <script src="~/Scripts/beautify-select.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var items = {
                "gandalf": "Gandalf",
                "harry": "Harry Potter",
                "jon": "Jon Snow",
                "tony": "Tony Stark",
                "steve": "Steven Rogers",
                "natasha": "Natasha Romanova",
            }

            $('#test-select').BeautifySelect({
                items: items,
                showValue: true,
                classes: {
                    wrapper: '',
                    select: '',
                    option: '',
                    group: '',
                },
                styles: {
                    wrapper: '',
                    select: '',
                    option: '',
                    group: '',
                }
            });

        });
    </script>

The function will wrap your select with following html archtechture.

<div class="beautify-select">
    <label>not required</label>
    <span>
    	<select class='display-select' >
        </select>
        <br>
    	<select class='value-select' id='you-id' size='options length'>
    	</select>
    </span>
</div>

you can get your selected value by orignal method.

$('#you-id').val();

enjoy it

Idea comes form: https://jsfiddle.net/dkellner/7ac9us70/

Test References: https://jsfiddle.net/stupidong/o6ep4ea2/

Beauty references: https://codepen.io/ericrasch/pen/zjDBx