https://moneyforward-dev.jp/entry/2015/03/10/sass_css

マネーフォワードでフロントエンドの開発をしています頼本です。

前回の「Haml、Sassを使って効率よくコーディングする方法（基礎編）」に引き続き、今回は、初級編として、マネーフォワードがどのようにHaml、Sassを使っているのか、実戦で使える内容を例にご紹介いたします。　

SassやCSSでチェックボックスやラジオボタンをカスタマイズする方法

デフォルトのチェックボックス・ラジオボタンは小さい・・・デザイン的にイケてないので見た目を変更したい・・・そんな要望は多くあると思います。そこで、今回はinput+labelとSassやCSSで簡単にチェックボックス・ラジオボタンをカスタマイズする方法をご紹介します。　

チェックボックス・ラジオボタンのデザインをカスタマイズした時の見た目

チェックボックスのカスタマイズ

width: $size; height: $size; // contentに表示したい画像を指定
content: url("#{$type}off.png"); } } // :checkedの擬似クラスでinput要素のチェック状態を取得。labelは接続セレクタを使い、チェック状態用の画像を指定する &:checked + label::before { content: url("#{$type}on.png"); } // 【任意】input要素をdisabledにする事がある場合は、disabled用のスタイルを指定 &:disabled + label { opacity: .3; cursor: not-allowed; } }

// チェックボックスのカスタマイズ // 第1引数に画像サイズ、第2引数に画像名を指定 .custom-checkbox { @include custom-input(20px, checkbox); }

// ラジオボタンのカスタマイズ .custom-radio { @include custom-input(18px, radio); } [/su_tab]

[su_tab title="CSS"]

// チェックボックスのカスタマイズ
.custom-checkbox {
  display: none;
}
.custom-checkbox + label {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  padding-left: 25px;
  min-height: 20px;
  line-height: 20px;
  cursor: pointer;
}
.custom-checkbox + label::before {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-block;
  width: 20px;
  height: 20px;
  content: url("checkbox_off.png");
}
.custom-checkbox:checked + label::before {
  content: url("checkbox_on.png");
}
.custom-checkbox:disabled + label {
  opacity: .3;
  cursor: not-allowed;
}
// ラジオボタンのカスタマイズ
.custom-radio {
  display: none;
}
.custom-radio + label {
  position: relative;
  display: inline-block;
  margin-right: 5px;
  padding-left: 23px;
  min-height: 18px;
  line-height: 18px;
  cursor: pointer;
}
.custom-radio + label::before {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  content: url("radio_off.png");
}
.custom-radio:checked + label::before {
  content: url("radio_on.png");
}
.custom-radio:disabled + label {
  opacity: .3;
  cursor: not-allowed;
}

[/su_tab] [/su_tabs]

たったこれだけで、文頭に記載したカスタマイズが行えます！なお、IE8以前の古いブラウザには対応していないので、その点ご注意ください。　

ちなみに

今回ご紹介した実装方法・デザインは、マネーフォワードで今春リリースする新サービスで実際に使われる予定の物です。マネーフォワードはこれからも既存サービスをより良い物にしていき、更に新サービスもリリースして参ります。　

最後に

マネーフォワードでは、フロントエンドの開発や、サービスの企画・画面設計に携わるフロントエンドエンジニアを募集しています。みなさまのご応募お待ちしております！

マネーフォワード採用サイト
https://recruit.moneyforward.com/

Wantedly
https://www.wantedly.com/projects/9977