/*************************************/
/*                                   */
/*        Riccardo Andreatta         */
/*                                   */
/*   CUSTOM CROSS BROWSER DROPDOWN   */
/*                                   */
/*************************************/

/*** appearance rules are used to remove default arrows on HTML tag select  - Chrome, Safari, Mozilla, Opera ***/
select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    /* the following rules can be modified as you wish */
    border: 1px solid #DDD;
    border-radius: 0;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    font-size: 16px;
    padding: 8px 12px;
    height: 50px;
    width: 100%;
}

/*** the following rule remove default arrow on HTML tag select - IE10+ ***/
select::-ms-expand {
    display: none;
}

/*** IE8 and IE9 rules ***/
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    position: absolute;
    top: 43%;
    left: 93%;
    content: ')';
    font-size: 6px;
    width: 100%;
}

.ie8 .selectTagWrapper,
.ie9 .selectTagWrapper {
    position: relative;
    border: 1px solid #DDD;
    overflow: hidden;
    width: 100%;
}

.ie8 .selectTagWrapper > select,
.ie9 .selectTagWrapper > select {
    filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1,color=#FF0000) progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1,color=#FF0000);
    border: none;
    font-size: 16px;
    padding: 8px 12px 15px;
    width: 125%;
}

@media screen and (min-width: 768px) {
    .ie8 .prefix-icon-arrow-down-fill:before,
    .ie9 .prefix-icon-arrow-down-fill:before {
        left: 95%;
    }
}

/**************************************************************************/
/* EXAMPLE 2: Select tag with backgound coloured and with white arrow.    */
/*                                                                        */
/* NOTE: The following rules can be taken off from your code.             */
/*       In this example there is a new larger and white arrow and a new  */
/*       background color for both the select and the options.            */
/**************************************************************************/
.example2 select {
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20x%3D%2212px%22%20y%3D%220px%22%20width%3D%2224px%22%20height%3D%225px%22%20viewBox%3D%220%200%206%203%22%20enable-background%3D%22new%200%200%206%203%22%20xml%3Aspace%3D%22preserve%22%20fill%3D%22%23fff%22%3E%3Cpolygon%20points%3D%225.992%2C0%202.992%2C3%20-0.008%2C0%20%22/%3E%3C/svg%3E);
    background-color: #00AAAE;
    border-color: #00AAAE;
    box-shadow: none;
    color: #FFF;
}

.ie8 .example2 .selectTagWrapper,
.ie9 .example2 .selectTagWrapper {
    border: none;
    color: #FFF;
}

/**************************************************************************/
/* EXAMPLE 3: A different effect when the options box is opened.          */
/*                                                                        */
/* NOTE: The following rules can be taken off from your code.             */
/*       In this example another solution is proposed: here we use only   */
/*       the wrapper as a emulator of the select. For this reason, there  */
/*       is a gap between the border of the wrapper and the options box   */
/*       that creates a different effect that maybe can be used.          */
/*       Example 3 highlights this effect when you open the options box.  */
/**************************************************************************/
.example3 select {
    /* you should replace the default select with these rules to have the effect described above */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: none;
    outline: none;
    border: none;
    border-radius:0;
    box-shadow: none;
}

.example3 .selectTagWrapper {
    position: relative;
    border: 20px solid #DDD;
}

.example3 .prefix-icon-arrow-down-fill:before {
    position: absolute;
    top: 43%;
    left: 93%;
    content: ')';
    font-size: 6px;
    width: 100%;
}