フォームのパーツで、selectやcheckboxやradioはinputのtextのようにcssで装飾出来ず、オリジナルのデザインにするためにはひと手間必要になります。

ただ、selectは見た目を変えてもクリックした後に出てくるoptionはなかなか変えられないため、
いっその事、selectとcheckboxの要素を合わせたようなものを作成してみました。

 

実際、selectは使わずに、
inputのtextと、checkboxを使用して作成しました。

codepenを以前から登録していたのですが、使うことがなかったので試しに使ってみました。

See the Pen selectとcheckboxを掛けあわせたものをオリジナルデザインで on CodePen.

これは、inputのtextの箇所をクリックすると、リストが表示されます。(そのリスト一つ一つがcheckboxです)
そして、チェックをすると、チェックした要素のvalueがinputのtextの値に入ります。

「.atCheckbox」の中にワンセットという感じで、「.atCheckbox」ごと追加すれば増やしても、jqueryの方は変更する必要はないです。

codepen

codepenを実際に使ってみましたが、コードも入れやすいですし、直ぐに結果が表示されるのでいいですね！
使い回せそうなコードを登録するのはもちろん、ちょっと試しにjavascriptを試してみたいといった時なんかもいいかもしれません。

そんなcodepenで2015年に最もお気に入りされたコードのランキングが公開されていました。

Top Pens of 2015 on CodePen

参考になるコードばかりで、見ているだけでも楽しいですね！