Custom Select Menu

HTML

<script src="http://oneillwebs.com/www/js/plugins/jquery.fs.selecter.min.js"></script>
<link rel="stylesheet" href="http://oneillwebs.com/www/css/reset.css">
<link rel="stylesheet" href="http://oneillwebs.com/www/css/grid.css">
       
        <div class="row">
            <div class="col50 relative">
                <i class="arrow"></i>
                <select>
                    <option value="de_DE-test">Category 1</option>
                    <option value="en_US-test">Category 2</option>
                    <option value="es_ES-test">Category 3</option>
                    <option value="es_MX-test">Category 4</option>
                    <option value="fr_FR-test">Category 5</option>
                    <option value="fr_CA-test">Category 6</option>
                    <option value="it_IT-test">Category 7</option>
                    <option value="pt_BR-test">Category 7</option>
                    <option value="sv_SE-test">Category 7</option>
                    <option value="zh_CN-test">Category 7</option>
                </select>
            </div>
        </div>

CSS

.row { margin: 2em; }

/*
==========================================================================
 FLAGS
========================================================================== */
[data-value*=de_DE] { color: orange !important; }
[data-value*=en_US] { color: red !important; }
[data-value*=es_ES] { color: blue !important; }
[data-value*=es_MX] { color: green !important; }
[data-value*=fr_FR] { color: lime !important; }
[data-value*=fr_CA] { color: yellow !important; }
[data-value*=it_IT] { color: puple !important; }
[data-value*=pt_BR] { color: fuscia !important; }
[data-value*=sv_SE] { color: pink !important; }
[data-value*=zh_CN] { color: black !important; }



/* 
==========================================================================
 SELECT MENUS
========================================================================== */
/* Arrow */
.selecter .selecter-selected:after { background: url("http://www.aptoinn.com/images/down_arrow.png") no-repeat !important; right: 10px !important; position: absolute !important; height: 10px !important; width: 20px !important; right: 8px !important; top: 5px !important; }

/* Text Alignment */
.selecter .selecter-selected { text-align: center; }

/* Highlighting (off) */
.selecter *::-moz-selection { background: transparent; }
.selecter *::selection { background: transparent; }

/* Default */ 
.selecter-element { display: none !important; }
.selecter { display: block; position: relative; z-index: 1; }
.selecter:after { display: block; content: "V"; position: absolute; top: 0; right: 0; color: black; }

.selecter .selecter-selected { background: white; border: 1px solid #ccc; color: #000; cursor: pointer; display: block; font-size: 11px; line-height: 1.4em !important; margin: 0; overflow: hidden; padding: .25em .75em; position: relative; text-overflow: clip; z-index: 49; }
.selecter .selecter-selected:after { content: ''; background: url("../images/sprite_master.png") no-repeat -168px -230px; position: absolute; height:...

JavaScript

$("select").selecter();