CSS for the “down arrow” on a <select> element?

Question

Is it possible to stylize the down arrow on a drop down select element? i.e., (-->)

I suspe

Answer 1

http://jsfiddle.net/u3cybk2q/2/ check on windows, iOS and Android (iexplorer patch)

.styled-select select {
   background: transparent;
   width: 240px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}
.styled-select {
   width: 240px;
   height: 34px;
   overflow: visible;
   background: url(http://nightly.enyojs.com/latest/lib/moonstone/dist/moonstone/images/caret-black-small-down-icon.png) no-repeat right #FFF;
   border: 1px solid #ccc;
}
.styled-select select::-ms-expand {
    display: none; /*patch iexplorer*/
}

  

       
          Here is the first option
          The second option