index.html

<html>
<head>
  <title>Style select with pure CSS!</title>
  <style>
    @font-face {
      font-family: 'FontAwesome';
      src: url("fonts/fontawesome-webfont.eot?v=4.0.3");
      src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.0.3") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff?v=4.0.3") format("woff"), url("fonts/fontawesome-webfont.ttf?v=4.0.3") format("truetype"), url("fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular") format("svg");
      font-weight: normal;
      font-style: normal;
    }

    .wrapper {
      position: relative;
      width: 150px;
    }

    .dropdown {
      border: 1px solid #2CA7E5;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      background: transparent;

      border: none;
      color: #1455A2;
      outline: none;

      width: 100%;
      padding: 6px;

      text-indent: 0.01px;
      text-overflow: "";
    }

    .dropdown:after {
      background: none repeat scroll 0 0 #2CA7E5;
      color: #FFFFFF;

      content: "\f078";
      font-family: 'FontAwesome';
      font-size: 14px;

      padding: 8px;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;

      z-index: -1;
    }

    /* This hides dropdown button arrow in IE */
    select::-ms-expand {
      display: none;
    }

    /* This hides focus around selected option in FF */
    select:-moz-focusring {
      color: transparent;
      text-shadow: 0 0 0 #000;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="dropdown">
      <select>
        <option>18 per page</option>
        <option>10 per page</option>
        <option>5 per page</option>
        <option>A very long option to overflow arrow</option>
      </select>
    </div>
  </div>
  <div style="margin-top: 20px; width: 280px;">
    UserAgent:
    <script>
      document.writeln(navigator.userAgent);
    </script>
  </div>
</body>
</html>