ウィルスタイル株式会社 / Will Style Inc.

セレクトボックスの装飾

まず、select要素の挙動を統一するため、要素をappearance: button;でボタン要素にしてしまいます。
select::-ms-expandでIEの矢印を非表示にします。
select:-moz-focusring はFireFoxでフォーカス時に点線が出てしまうのを回避しています。（*text-shadowの色はselectのカラーにあわせてください。）

select{
    outline:none;
    text-indent: 0.01px;
    text-overflow: '';
    background: none transparent;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
}
select option{
  background-color: #fff;
  color: #333;
}
select::-ms-expand {
  display: none;
}
select:-moz-focusring { 
  color: transparent; 
  text-shadow: 0 0 0 #828c9a;
}

これで矢印もない状態になりました。
あとはこれに装飾を施してあげます。以下にサンプルを用意しました。

select要素には:beforeなどの擬似要素を指定できないのでdivでwrapしてその擬似要素に下向きの矢印を表示しています。
今回は比較的シンプルなion iconを使用しましたが、Font Awesomeでも構いません。
これは知らなかったんですが、absoluteで配置しているので矢印部分をクリックするとselectを選択できないという問題にぶつかりました。
ですが、pointer-eventsというプロパティでクリック出来ないようにできるそうです。
なので.select-wrap:beforeをpointer-events: none;でクリックイベントを回避しています。

.select-wrap {
    position:relative;
}
.select-wrap:before {
    z-index: 1;
    position: absolute;
    right: 15px;
    top: 0;
    content: "\f123";
    font-family: "IonIcons";
    line-height: 43px;
    color: #7F878C;
    pointer-events: none;
}

これでselect要素はある程度自由に装飾できます。
ちょっとやり過ぎ感はありますがこんなこともできます。

<label class="label-checkbox">
     <input type="checkbox" />
     <span class="lever">Choose.01</span>
</label>

.label-checkbox input[type="checkbox"]{
  display: none;
}
.label-checkbox{
  cursor: pointer;
  color: #828c9a;
  padding-right: 15px;
  font-weight: normal;
}
.label-checkbox .lever:before{
  content:"\f372";
  font-family: "IonIcons";
  margin-right: 7px;
  color: #ccc;
  font-size: 18px;
  position: relative;
  top: 2px;
}
.label-checkbox input[type="checkbox"]:checked + .lever{
  color: #4788bf;
}
.label-checkbox input[type="checkbox"]:checked + .lever:before{
  content:"\f373";
  font-family: "IonIcons";
  color: #4788bf;
}