As a JavaScript developer, I find myself keeping up less and less with CSS. Recently I had to style a select menu and figured this was probably now possible in at least modern browsers. After some research and trial and error, this is the solution I ended up with that worked pretty well:

select {
  /* General styling */
  height: 30px;
  width: 100px;
  border-radius: 0;
  padding-left: 10px;

  /* Removes the default <select> styling */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Positions background arrow image */
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T93TMQrCUAzG8V9x8QziiYSuXdzFC7h4AcELOPQAdXYovZCHEATlgQV5GFTe1ozJlz/kS1IpjKqw3wQBVyy++JI0y1GTe7DCBbMAckeNIQKk/BanALBB+16LtnDELoMcsM/BESDlz2heDR3WePwKSLo5eoxz3z6NNcFD+vu3ij14Aqz/DxGbKB7CAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: 75px center;
}

Here is an example:

Try it out yourself on JSBin.

There are two key properties here: the appearance property and background-image. The appearance property set to none is used to strip away the native styling of the select menu. Support for appearance is pretty good across modern browsers: http://caniuse.com/#feat=css-appearance.

Then, a base64 encoded image of a prettier dropdown arrow is positioned in the background on the right side. Why base64 encode the image? This way you don't have to worry about an extra HTTP request or figuring out where to put that image. Just copy that styling and you're all set! There is also a cool site, https://www.iconfinder.com/icons/211614/arrow_b_down_icon#size=20, where you can grab the base64 encoded icons if you don't like the one in this example.

How have you styled select elements? Let me know in the comments!