KumaTechLab
2022-11-04

【CSSのみ】クリックすると動くチェックボックスの作り方

【CSSのみ】クリックすると動くチェックボックスの作り方

チェック時にチェックしたように動くチェックボックスの作り方について紹介します。

文字だけだとイメージしにくいと思います。下記サンプルをクリックしてみてください。

クリックすると線が引かれ、再度クリックすると引かれた線が戻っていくような演出です。

この記事では下記サンプルのHTML、CSS部分について説明します。

HTML部分

HTMLはほとんどがSVG関連のものになります。

下記記述ではSVGを実際に呼び出す場所に書かなくても使用できる方法です。チェックボックスを複数設置する場合には下記のようにしておいた方はコードがすっきりします。(symbol詳細)

「id=”check-stroke”」の方はチェックした時のオレンジの線、「id=”check-stroke-background”」はボックスからはみ出したように見せるための線です。オレンジの下に太めの白線を引くことではみ出した感を出しています。

<svg class="template">
  <symbol id="check-stroke">
    <polyline stroke-width="3" stroke-linejoin="round" stroke-linecap="round" points="5 10.5 10.5 16 23.5 4"></polyline>
  </symbol>
  <symbol id="check-stroke-background">
    <polyline stroke-width="8" stroke-linejoin="round" stroke-linecap="round" points="5 11 10.5 15 23.5 4"></polyline>
  </symbol>
</svg>

上で定義したものは「use」を使用することで呼びだすことができます。

<svg viewBox="0 0 28 28" width="28px" hegiht="28px">
	<use href="#check-stroke-background"></use>
</svg>
<svg viewBox="0 0 28 28" width="28px" hegiht="28px">
	<use href="#check-stroke"></use>
</svg>

実際にチェックボックスとして機能させるためにチェックボックスも必要です。CSSで表現しやすいため、チェックボックス本体の前に設置しています。

<input type="checkbox" class="check" />
<div class="checkbox">
  ...
</div>

CSS部分

このチェックボックス表示するにあたってのポイントであるチェック部分のCSSからみていきましょう。

SVG部分の15,16行目の「stroke-dasharray」「stroke-dashoffset」に注目です。

  • stroke-dasharray・・・対象の描画部分と間隔について指定することができます。今回の例だと描画部分と非描画部分のどちらも長さ28(pixels)の破線ができます。
  • stroke-dashoffset・・・stroke-dasharrayによって設定された描画部の開始位置を指定します。今回の例だと長さ28からなので非描画部分の開始からということになります。
1.checkbox {
2	margin-right: .5rem;
3	position: relative;
4	display: inline-flex;
5	width: 24px;
6	height: 24px;
7	border-radius: 4px;
8	border: 2px solid #cccfdb;
9	transition: all 0.3s ease;
10	cursor: pointer;
11

12	svg {
13		fill: none;
14		stroke: #ea5514;
15		stroke-dasharray: 28;
16		stroke-dashoffset: 28;
17		transition: all 0.3s ease;
18		transform: scale(1.1);
19		position: absolute;
20		top: 0;
21		left: 3px;
22

23		&:first-child {
24			stroke: #fff;
25		}
26	}
27}

以上の設定で非チェック時にはチェックが見えない状態となっています。

ここにチェックされた際の動作を加えます。チェックされた際の動作に合わせてinputのチェックボックス部分も見ていきます。

「appearance」でブラウザ由来のチェックボックスをなくします。なくしてしまうとチェックもできなくなってしまいますので、「after」要素でクリックするための箱を作っています。

チェックされた際にSVGを表示しなくてはいけないため「:checked」を使用して、SVGの「stroke-dashoffset」を0にして(非描画部から開始されるところを描画部から開始されるようにして)います。

.check {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    position: absolute;
  top: 0;
  left: 0;
  
  &:after {
    position: absolute;
    width: 24px;
    height: 24px;
    content: '';
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
  }


  &:checked {
    & + .checkbox {
      color: #ea5514;
      border-color: #ea5514;


      svg {
        stroke-dashoffset: 0;
      }
    }
  }
}

まとめ

javascriptを使用しなくても簡単にアニメーションのあるチェックボックスが作成できることが分かったのではないでしょうか。

チェック部分の「polyline」ですが非常に簡単に編集できます。( x1, y1, x2, y2, …)のように並んでいますので、もう少し角度を浅くしたいというのであれば第三ポイントのxを大きく、yを小さくしてあげればOKです。

また、今回は下に太いラインを引くことでチェックボックスからはみ出た形にしていますが、枠もSVGにしてあげればわざわざそのようにする必要もありません。枠にもアニメーションを入れることもできます。

2020 KumaTechLab.