[CSS] チェックボックスをON/OFFボタンに変える(疑似セレクタ使用)

HTML5やCSS3やjQueryで色んなことができるようになった昨今でも、デフォルトのチェックボックスって基本的にダサいですよね。というか、小さいですよね…。

jQuery書くのは面倒だけど、なんかトグルボタン的な、ON/OFFボタン的な表示にできないかなあと思いまして。できたのでメモ。

上記のやつです。


スポンサーリンク

0.基本のHTMLコード

下記のHTMLに対してCSSを作っていきます。

<div class="on-off">
    <label for="aaa">テスト</label>
    <input type="checkbox" name="aaa" class="on-off">
</div>

1.全体のコード

まず先に、じゃじゃじゃーっと完成形のコードを書きます。

/* 親ブロック */
div.on-off {
    display: inline-block;
    margin: 0.2em 0 1.5em;
    padding: 0.5em 1em;
    border: 3px double #e3a996;
    vertical-align: top;
}

/* ラベル */
div.on-off label {
    display: inline-block;
    margin: 0 2em 0 1em;
    line-height: 2.4em;
}

/* チェックボックス */
input[type="checkbox"].on-off {
    /* デフォルトのチェックボックスを表示しない */
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;

   /* 土台部分 */
    display: inline-block;
    background-color: #eeeeee;
    border: none;
    border-radius: 6px;
    width: 8em;
    height: 2.4em;
    margin: 0;
}

/* ONボタン(チェックされていないとき) */
input[type="checkbox"].on-off:before {
    content: "ON";
    display: inline-block;
    text-align: center;
    line-height: 2.4em;
    width: 4em;
    color: #000000;
    background-color: #eeeeee;
    border-radius: 6px 0 0 6px;
    box-shadow: 2px 2px 6px 0px #cccccc inset;
}

/* OFFボタン(チェックされていないとき) */
input[type="checkbox"].on-off:after {
    content: "OFF";
    display: inline-block;
    text-align: center;
    line-height: 2.4em;
    width: 4em;
    color: #ffffff;
    background-color: #ac4236;
    border-radius: 0 6px 6px 0;
    box-shadow: 0px 2px 6px 0px #e3a996 inset;
}

/* ONボタン(チェックされているとき) */
input[type="checkbox"].on-off:checked:before {
    color: #ffffff;
    background-color: #ac4236;
    box-shadow: 2px 2px 6px 0px #e3a996 inset;
}

/* OFFボタン(チェックされているとき) */
input[type="checkbox"].on-off:checked:after {
    color: #000000;
    background-color: #eeeeee;
    box-shadow: 2px 2px 6px 0px #cccccc inset;
}

スポンサーリンク

2.親ブロック

ラベルとチェックボックスを包むDIVタグに対するCSSです。

/* 親ブロック */
div.on-off {
    display: inline-block;
    margin: 0.2em 0 1.5em;
    padding: 0.5em 1em;
    border: 3px double #e3a996;
    vertical-align: top;
}

ポイントというポイントはありませんが、vertical-align: top; を指定して、中のラベルとチェックボックスの高さを合わせるようにしています。こうしないと私の環境ではどうもラベルとチェックボックスの位置がズレてしまったのです…。

3.ラベル

ラベルもあまり特筆するポイントはありません。

/* ラベル */
div.on-off label {
    display: inline-block;
    margin: 0 2em 0 1em;
    line-height: 2.4em;
}

チェックボックスと並べて表示するためにdisplay: inline-block; を、高さを合わせるためにline-height: 2.4em;を指定しています。

4.チェックボックス

さて本題のチェックボックスです。デフォルトのチェックボックスを隠してしまい、見える部分は疑似セレクタの:beforeと:afterで実装していきます。

4-1.ベース

土台となる、チェックボックス本体部分です。

/* チェックボックス */
input[type="checkbox"].on-off {
    /* デフォルトのチェックボックスを表示しない */
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;

   /* 土台部分 */
    display: inline-block;
    height: 2.4em;
    width: 8em;
    background-color: #eeeeee;
    border: none;
    border-radius: 6px;
    margin: 0;
}

まずはデフォルトのチェックボックスを表示しないためのappearance: none; がポイントです。こちらは現在もベンダープレフィックスが必要みたいなので、つけます。

土台部分に関しては、display: inline-block; とheight: 2.4em;が、ラベルと並べて表示するために指定している部分です。widthは後述の:beforeと:afterを足した数値にしています。

:beforeと:afterが乗ってくるので背景の指定はいらないかもしれません。背景がいらなければborder-radius指定もいりませんが、表示が崩れてしまった際にわかりやすい(デバッグ的な意味で)ので入れています。

4-2.チェックされていないときの疑似セレクタ

実際のボタンの表示となる疑似セレクタ部分です。チェックされていない→ONが非アクティブ、OFFがアクティブとして考えます。

/* ONボタン(チェックされていないとき) */
input[type="checkbox"].on-off:before {
    content: "ON";
    display: inline-block;
    text-align: center;
    line-height: 2.4em;
    width: 4em;
    color: #000000;
    background-color: #eeeeee;
    border-radius: 6px 0 0 6px;
    box-shadow: 2px 2px 6px 0px #cccccc inset;
}

/* OFFボタン(チェックされていないとき) */
input[type="checkbox"].on-off:after {
    content: "OFF";
    display: inline-block;
    text-align: center;
    line-height: 2.4em;
    width: 4em;
    color: #ffffff;
    background-color: #ac4236;
    border-radius: 0 6px 6px 0;
    box-shadow: 0px 2px 6px 0px #e3a996 inset;
}

共通部分はcontent~widthの5行です。ここでもline-heightで高さを合わせています。widthは、本体の半分の幅を指定します。

color~box-shadowがデザイン部分です。非アクティブであるONは灰色、OFFは赤色にしています。

4-3.チェックされているときの疑似セレクタ

ボタンがチェックされて、ONがアクティブ、OFFが非アクティブになる部分のCSSです。

/* ONボタン(チェックされているとき) */
input[type="checkbox"].on-off:checked:before {
    color: #ffffff;
    background-color: #ac4236;
    box-shadow: 2px 2px 6px 0px #e3a996 inset;
}

/* OFFボタン(チェックされているとき) */
input[type="checkbox"].on-off:checked:after {
    color: #000000;
    background-color: #eeeeee;
    box-shadow: 2px 2px 6px 0px #cccccc inset;
}

チェックボックスはチェックされるとUI要素状態擬似クラスの:checkedを持ちます。これを利用して、チェックされているときのデザインを作っています。

内容としては、チェックされていない場合のデザイン部分を上書きしていて、:afterと:beforeを入れ替えているだけです。

5.SCSS表記

ついでにSCSSでの表記も書いておきます。一度使い始めるともう手放せません。なんて便利なんだ、SCSS…。

div.on-off {
    display: inline-block;
    margin: 0.2em 0 1.5em;
    padding: 0.5em 1em;
    border: 3px double #e3a996;
    vertical-align: top;
	
	label {
		display: inline-block;
		margin: 0 2em 0 1em;
		line-height: 2.4em;		
	}
}

input[type="checkbox"].on-off {
    appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    -moz-appearance: none;

    display: inline-block;
    background-color: #eeeeee;
    border: none;
    border-radius: 6px;
    width: 8em;
    height: 2.4em;
    margin: 0;
	
	&:before {
		content: "ON";
		display: inline-block;
		text-align: center;
		line-height: 2.4em;
		width: 4em;
		color: #000000;
		background-color: #eeeeee;
		border-radius: 6px 0 0 6px;
		box-shadow: 2px 2px 6px 0px #cccccc inset;
	}

	&:after {
		content: "OFF";
		display: inline-block;
		text-align: center;
		line-height: 2.4em;
		width: 4em;
		color: #ffffff;
		background-color: #ac4236;
		border-radius: 0 6px 6px 0;
		box-shadow: 0px 2px 6px 0px #e3a996 inset;
	}

	&:checked {
		&:before {
			color: #ffffff;
			background-color: #ac4236;
			box-shadow: 2px 2px 6px 0px #e3a996 inset;
		}

		&:after {
			color: #000000;
			background-color: #eeeeee;
			box-shadow: 2px 2px 6px 0px #cccccc inset;
		}
	}
}

DreamweaverでSCSSを使った記事があるので、よければどうぞです↓

Dreamweaver CC 2017のCSSプリプロセッサー機能を有効にしてSCSSを使ってみました

この投稿の投稿者は おさみ です。ブックマーク用 パーマリンク

スポンサーリンク