select element のカスタマイズ

http://codepen.io/yomotsu/pen/ZGrJJN

<style>
span.select{
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
  display: inline-block;
  max-width:100%;
  overflow: hidden;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAGCAAAAADvF0E7AAAAAnRSTlMA/1uRIrUAAAA2SURBVHgBY2jw8/H18238DwMMjwOA/MCnCIH/c319fef+RxL4H+8b9x9FYK/PPlSB/7P+IwEA9SdRG5Z+ISIAAAAASUVORK5CYII=) no-repeat 100% 50% #fff;
}
span.select:after,
span.select:before{
  content: '';
  position: absolute;
  top:0;
  bottom: 0;
  width: 1px;
  background: #000;
}
span.select:after{left:0;}
span.select:before{right:0;}
span.select select{
  font-size: 16px;
  line-height: 24px;
  display: block;
  height: 34px;
  white-space: nowrap;
  box-sizing: border-box;
  max-width:100%;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
      -ms-appearance: none;
          appearance: none;
  text-indent: .01px; /*firefox*/
  text-overflow: ""; /*firefox*/
}
</style>

---

<span class="select">
  <select>
    <option>item1</option>
    <option>item2 item2 item2 item2</option>
    <option>item3</option>
  </select>
</span>

<span class="select">
  <select>
    <option>item1</option>
    <option>item2</option>
    <option>item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3 item3</option>
  </select>
</span>