Blog

selectとcheckboxを合わせたようなフォームのオリジナルパーツ

2016.01.19Cat:jQuery web制作サポート

フォームのパーツで、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
Top Pens of 2015 on CodePen

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

Author Profile

abe
abe
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ