Blog スタッフブログ

フォームのセレクトボックスとチェックボックス・ラジオボタンをCSSで装飾する

Category | Blog
Tag |
/ 168,109views

20160318-img01

こんにちは制作の奥田です。
お問い合わせフォームで、テキストフィールドやテキストエリアを装飾するのはとても簡単なんですが、セレクトボックスやチェックボックス・ラジオボタンの装飾はクロスブラウザの問題などでちょっとややこしいイメージをお持ちの方も多いと思います。
しかし、IE8以前のサポート終了によりIE9以降の対応でよくなったのを期に、フォームをデザインすることが容易になってきました。
せっかく良いデザインにしてもフォームの要素がデフォルトのままだとなんか残念な気持ちになりますよね?
というわけで今回はCSSのみでフォームを装飾する方法をご紹介いたします。

セレクトボックスの装飾

まず、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;
}

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

See the Pen BKpOdY by Mineo (@min30327) on CodePen.

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要素はある程度自由に装飾できます。
ちょっとやり過ぎ感はありますがこんなこともできます。

See the Pen vGgzzJ by Mineo (@min30327) on CodePen.

チェックボックス・ラジオボタンの装飾

次にチェックボックスとラジオボタンの装飾です。
こちらはinput自体は装飾できないので非表示にしてしまいます。
そしてlabelで囲っていればlabelをクリックした際にチェックできるので見えないところで押されているというイメージです。

<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;
}

:checked + でチェックされた要素の次の要素を選択できるので選択時に.leverを変化させてあげれば見た目にもすっきりします。
以下は簡単にアイコンフォントを使用した例です。

See the Pen pyRxoM by Mineo (@min30327) on CodePen.

少し手の込んだ感じで装飾すると以下の様なこともできます。

See the Pen xVgyOq by Mineo (@min30327) on CodePen.

いかがでしたか?
せっかくのデザインに併せてフォームも綺麗に装飾してあげればフォームの離脱率も下がり、コンバージョンにも繋がります。
是非参考にしてみてください。

Category | Blog
Tag |
Author | Mineo Okuda / 168,109views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)