はじめに

コーディングを担当している仕事の中で、「ボタンクリックで色を切り替える」という作業がありました。

一般的にはJavaScriptを使うかと思うのですが、今回HTMLとCSSのみで作成するよう指示がありました。

JavaScriptを使用せず、CSSとチェックボックスを使用して色が切り替わるボタンを作ってみたので、その作り方を紹介します（ついでにテキストも切り替えてみました）。

仕上がりイメージ

目次

ボタンのおおよそのデザインを作る

ボタンをクリックした時に色が変わるボタンをCSSだけで作る場合はチェックボックスinput type="checkbox"とlabel要素を使用します。

まずはボタンのおおよそのデザインを作っていきます。

テキスト部分（OFF）は疑似要素で出力することで、色が切り替わった際にテキストも切り替えられるようになります。

labelはデフォルトではマウスオーバーをした時にポインターが切り替わらないので、cursor: pointerでマウスオーバー時のポインターを変更しておけば、「クリックができる」というのが分かりやすいです。

HTML

<input type="checkbox" class="checkbox">
<label class="btn"></label>

CSS

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #aaa;
	color: #fff;
	border-radius:50%;
	font-size: 1.0rem;
	cursor: pointer;
}
.btn:before {
	content: 'OFF';
}

できあがったもの

このままではチェックボックスが表示されてしまいますので、チェックボックスを非表示にしつつチェックボックスとボタンを関連付けます。

チェックボックスとボタンを関連付ける

チェックボックスとボタンを関連付けることで、ボタンをクリックした時にチェックボックスに反映される（チェックが入る）ようになります。

その方法は以下のとおりです。

labelにfor属性を設定し、idと同じ値を設定する事で、チェックボックスとボタンが関連付けされます。

HTMLで記述すると以下のとおりです。

HTML

<input type="checkbox" id="btn01" class="checkbox">
<label for="btn01" class="btn"></label>

CSS

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #aaa;
	color: #fff;
	border-radius:50%;
	font-size: 1.0rem;
	cursor: pointer;
}
.btn:before {
	content: 'OFF';
}
/*以下を追記*/
.checkbox {
	display: none;
}

できあがったもの

見た目では分かりませんが、チェックボックスとlabelを関連付けましたので、labelをクリックするとチェックが入るようになりました。

ちなみにチェックボックスを表示させたままで、idに対応したforを記述した場合と記述していない場合をそれぞれ作ってみました。

それぞれ、ボタン部分をクリックしてみて下さい。

forを記述した場合のみチェックボックスにチェックが入るのが確認できます。

forがある場合

forが無い場合

クリックで切り替わる挙動を追加する

このままだとクリックしても（見た目上は）何も変化がありませんので、クリック時の挙動を追加します。

具体的にはクリック時の背景色と疑似要素内のテキストを変化させます。

HTML

<input type="checkbox" id="btn01" class="checkbox">
<label for="btn01" class="btn"></label>

CSS

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #aaa;
	color: #fff;
	border-radius:50%;
	font-size: 1.0rem;
	cursor: pointer;
}
.btn:before {
	content: 'OFF';
}
.checkbox {
	display: none;
}
/*以下を追記*/
.checkbox:checked+.btn {
	background: #1ad33a;
}
.checkbox:checked+.btn:before {
	content: 'ON';
}

できあがったもの

これでクリックで切り替わるボタンができました。

同じページでボタンを複数作る場合は、idが重複いないよう、またforで違う値を関連付けないよう気を付けて下さい。

デフォルト（初期値）をONで表示したい場合

上記の例は初期値がOFFつまりチェックボックスにチェックが入っていない状態でしたが、初期値をONにしたい時は、HTMLのinputタグ内にcheckedを追記したら良いです。

HTML

<input type="checkbox" id="btn01" class="checkbox" checked>
<label for="btn01" class="btn"></label>

できあがったもの

デフォルト（初期値）でチェックが入っているので「ON」で表示されています。

テキストが青く反転表示されるのが気になる場合

今回の例ではテキスト部分に疑似要素を使っているため起こらないのですが、通常のテキストの場合、ボタンをクリックした際に時々テキストが選択されて青く反転される事があります。

現象を再現するため、今回は表示するテキストは固定で色だけ変えてみます。

何度かクリックをしていると、「BTN」のテキストが選択されて青く反転するのが分かるかと思います。

現象の再現

この時のソースは以下のとおりです。

CSSは疑似要素以外はこれまでの物と同じです。

HTML

<input type="checkbox" id="btn02" class="checkbox">
<label for="btn02" class="btn02">BTN</label>

この反転を無効にしたい場合は、CSSにuser-select: noneを追記すると良いです。

user-selectは要素内のテキストを選択可能にするかどうかを制御するプロパティになります。

CSS

.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: #aaa;
	color: #fff;
	border-radius:50%;
	font-size: 1.0rem;
	cursor: pointer;
	user-select: none; /*ここを追記*/
}
.checkbox {
	display: none;
}
.checkbox:checked+.btn {
	background: #1ad33a;
}

できあがったもの

クリックしても反転されなくなりました。