127,680viewsこんにちは制作の奥田です。お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね?というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。button;でボタン要素にしてしまいます。select::-ms-expandでIEの矢印を非表示にします。FireFoxでフォーカス時に点線が出てしまうのを回避しています。(*text-shadowの色はselectのカラーにあわせてください。#828c9a;}これで矢印もない状態になりました。あとはこれに装飾を施してあげます。以下にサンプルを用意しました。CodePen.select要素には:beforeなどの擬似要素を指定できないのでdivでwrapしてその擬似要素に下向きの矢印を表示しています。Awesomeでも構いません。これは知らなかったんですが、absoluteで配置しているので矢印部分をクリックするとselectを選択できないという問題にぶつかりました。pointer-eventsというプロパティでクリック出来ないようにできるそうです。none;でクリックイベントを回避しています。none;}これでselect要素はある程度自由に装飾できます。やり過ぎ感はありますがこんなこともできます。次にチェックボックスとラジオボタンの装飾です。こちらはinput自体は装飾できないので非表示にしてしまいます。labelで囲っていればlabelをクリックした際にチェックできるので見えないところで押されているというイメージです。チェックされた要素の次の要素を選択できるので選択時に.leverを変化させてあげれば見た目にもすっきりします。以下は簡単にアイコンフォントを使用した例です。CodePen.少し手の込んだ感じで装飾すると以下の様なこともできます。CodePen.いかがでしたか?せっかくのデザインに併せてフォームも綺麗に装飾してあげればフォームの離脱率も下がり、コンバージョンにも繋がります。参考にしてみてください。menuWorksBlogInformation。