MaterialデザインのCheckbox

はじめに

こんにちは、よっしーです。

前回は、CSSだけを使ったMaterialデザインのRadioの作り方を紹介しました。

今回はCSSだけを使ったMaterialデザインのCheckboxの作り方を紹介します。

CSS(LESS)でMaterialデザインのCheckbox

LESSで作ったMaterialデザインのCheckboxです。

HTMLとLESSのサンプルコードを記載します。
チェックが入ったときの波紋のアニメーション等は前回と同じです。

<div class="md-checkbox">
  <input id="md-checkbox1"  type="checkbox" value="Test1" checked>
  <label for="md-checkbox1" >
    Test1
  </label>
</div>
@md-checkbox-margin: 5px 0px;
@md-checkbox-checked-color: rgb(51, 122, 183);
@md-checkbox-checked-disabled-color: rgb(122, 122, 122);
@md-checkbox-border-color: rgba(0, 0, 0, 0.54);

@md-checkbox-size: 20px;
@md-checkbox-padding: 4px;

@md-checkmark-width: 2px;
@md-checkmark-color: #fff;

@md-ripple-size: 15px;
@keyframes ripple {
  0% {
    box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
  }
  50% {
    box-shadow: 0px 0px 0px @md-ripple-size rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0px 0px 0px @md-ripple-size rgba(0, 0, 0, 0);
  }
}

.md-checkbox {
  position: relative;
  margin: @md-checkbox-margin;

  input[type="checkbox"] {
    display: none;
    margin-right: @md-checkbox-size - 10px;
    margin-left:0px;

    &:checked + label:before {
      background: @md-checkbox-checked-color;
      border-color: @md-checkbox-checked-color;
      animation: ripple 0.2s linear forwards;
    }

    &:checked:disabled + label:before {
      background: @md-checkbox-checked-disabled-color;
      border-color: @md-checkbox-checked-disabled-color;
      animation: ripple 0.2s linear forwards;
    }

    &:disabled + label,&:disabled + label:before {
      cursor: not-allowed;
    }

    &:checked + label:after {
      @md-checkmark-size: @md-checkbox-size - 2*@md-checkbox-padding;

      transform: rotate(-45deg);

      top: (@md-checkbox-size / 2) - (@md-checkmark-size / 4) - @md-checkbox-size/10;
      left: @md-checkbox-padding;
      width: @md-checkmark-size;
      height: @md-checkmark-size / 2;

      border: @md-checkmark-width solid @md-checkmark-color;
      border-top-style: none;
      border-right-style: none;
    }
  }

    label {
    cursor: pointer;
    padding: 0px 0px 0px (@md-checkbox-size + 10px);
    margin-left: 5px;

    &:before, &:after {
      content: "";
      position: absolute;
      left:0;
      top: 0;
    }

    &:before {
      // box
      width: @md-checkbox-size;
      height: @md-checkbox-size;
      background: #fff;
      border: 2px solid @md-checkbox-border-color;
      border-radius: 2px;
      cursor: pointer;
      transition: background .3s;
    }


  }

  .form-inline &{
    display:inline-block;
  }
}

実行すると、こんな感じになります。

See the Pen Material Checkbox by Yoshiaki Haramoto (@haramoto) on CodePen.0

使い方(解説)

HTMLのタグ

サンプルで示したように、divタグでinputタグとlabelタグを囲みます。divタグのclassにはmd-checkboxを指定します。

inputタグにidを振ります。labelタグのforにinputタグのidを割り当てます。

LESS

色を変えたり、サイズを変更する場合は、LESSのサンプルコードの上の方に記載されていたコードを書き換えます。

@md-checkbox-margin: 5px 0px;
@md-checkbox-checked-color: rgb(51, 122, 183);
@md-checkbox-checked-disabled-color: rgb(122, 122, 122);
@md-checkbox-border-color: rgba(0, 0, 0, 0.54);
@md-checkbox-size: 20px;
@md-checkbox-padding: 4px;
@md-checkmark-width: 2px;
@md-checkmark-color: #fff;
@md-ripple-size: 15px;

この部分ですね。

変数 値の説明
@md-checkbox-margin Checkbox のマージン
@md-checkbox-checked-color Checkboxにチェックが入ったときの色 サンプルは青
@md-checkbox-checked-disabled-color Checkboxがdisabledのときの色
@md-checkbox-border-color: Checkboxの外側の□の色 基本的に変えない
@md-checkbox-size Checkboxのサイズ
@md-checkbox-padding Checkboxのpadding
@md-checkmark-width チェックマーク(✓)の幅 サンプルは2px
@md-checkmark-color チェックマーク(✓)の色 サンプルは白
@md-ripple-size クリックしたときの波紋のサイズ

まとめ

MaterialデザインのCheckboxをcss(less)で作成しました。

かっこいいので、ぜひ使ってみてください。