select arrow css hide code example

Example 1: hide select tag dropdown caret

appearance: none;
-webkit-appearance: none;
-moz-appearance: none;

/* For IE <= 11 */
select::-ms-expand {
   display: none;
}

Example 2: select box arrow hide css in ie

select::-ms-expand {
    display: none;
}

Example 3: change select arrow css

select {
    width: 268px;
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 5px;
    height: 34px;
    background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
    -webkit-appearance: none;
    background-position-x: 244px;
}

Tags:

Misc Example