[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

CSS擬似要素・擬似クラス

2013.01.25

チェックボックにチェックを入れることで、指定した要素の文字の色や幅(widthの値）を変えたり、表示非表示を切替えたりする方法のご紹介です。

サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。

チェックボックスのデザイン変更
チェックボックスにチェックを入れて要素を変化させる

チェックボックスのデザイン変更

まず最初に、チェックボックスのデザインをボタンのイメージへと変更してみます。

CSSの記述例はこんな感じです。

input[type=checkbox] {
    position: absolute;
    left: -9999px;
}
 
label {
    display: block;
	width:200px;
	text-align:center;
    font-weight: bold;
    color: #fff;
    background: #e54040;
    border:1px solid #dd0000;
	-webkit-border-radius:4px;
	-mozborder-radius:4px;
	border-radius:4px;
    padding: 5px;
	cursor:pointer
}

input[type=checkbox] {

position: absolute;

left: -9999px;

}

label {

display: block;

width:200px;

text-align:center;

font-weight: bold;

color: #fff;

background: #e54040;

border:1px solid #dd0000;

-webkit-border-radius:4px;

-mozborder-radius:4px;

border-radius:4px;

padding: 5px;

cursor:pointer

}

HTML側の記述例はこちら。

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Button</label>

1 2	<input type="checkbox" id="toggle"> <label for="toggle">Toggle Button</label>

こんなボタンになりました。

Toggle Button

チェックボックスにチェックを入れて要素を変化させる

上記のボタンを使って、指定の要素に様々な変化を付けてみます。

文字色を変更

まずはチェックを入れることで、要素の文字色を変更します。

<style>
div.changed {
    color: #000;
}
input[type=checkbox]:checked ~ div.changed {
    color: #ff0000;
}
</style>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Button</label>
<div class="changed">「Toggle Button」をクリックすると、
フォントの色が変わります。</div>

<style>

div.changed {

color: #000;

}

input[type=checkbox]:checked ~ div.changed {

color: #ff0000;

}

</style>

<label for="toggle">Toggle Button</label>

<div class="changed">「Toggle Button」をクリックすると、

フォントの色が変わります。</div>

チェックボックスにチェックが付いている時に適用されるセレクタ:checkedを利用します。

さらに「間接セレクタ (~) 」を併用して、チェック時のスタイルをdiv.changedの要素に対して適用させるという仕掛けです。

文字色を変更するデモ

要素の表示・非表示処理

先の例と仕掛けは同じで、今度はチェック時に要素を非表示にし、チェックを外すと表示させる仕組みを作ります。

<style>
div.changed {
    border:1px solid #ccc;
	-webkit-border-radius:4px;
	-mozborder-radius:4px;
	border-radius:4px;
	background:#fcfcfc;
	padding:20px;
}
input[type=checkbox]:checked ~ div.changed {
    display:none;
}
</style>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Button</label>
<div class="changed">「Toggle Button」をクリックすると、
要素が表示／非表示になります。</div>

<style>

div.changed {

border:1px solid #ccc;

-webkit-border-radius:4px;

-mozborder-radius:4px;

border-radius:4px;

background:#fcfcfc;

padding:20px;

}

input[type=checkbox]:checked ~ div.changed {

display:none;

}

</style>

<label for="toggle">Toggle Button</label>

<div class="changed">「Toggle Button」をクリックすると、

要素が表示／非表示になります。</div>

初期状態では要素を表示させておき、チェックが付いたらdisplay:none;で非表示にします。

要素の表示・非表示処理のデモ

要素を横移動させる

今度はCSS3のtransition-durationを利用して、チェックが付いた時、外れた時に要素を横方向へ滑らかに移動させてみます。

<style>
div.changed {
	position: absolute;
	left:0;
	width:200px;
	height:200px;
    border:1px solid #ccc;
	-webkit-border-radius:4px;
	-mozborder-radius:4px;
	border-radius:4px;
	background:#fcfcfc;
	padding:20px;
}

div,
input[type=checkbox]:checked ~ div {
	transition-duration: 1s;
	transition-delay: 0
}
input[type=checkbox]:checked ~ div.changed {
	left:400px;
}
</style>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Button</label>
<div class="changed">「Toggle Button」をクリックすると、
要素が右方向へ400px 移動します。</div>

<style>

div.changed {

position: absolute;

left:0;

width:200px;

height:200px;

border:1px solid #ccc;

-webkit-border-radius:4px;

-mozborder-radius:4px;

border-radius:4px;

background:#fcfcfc;

padding:20px;

}

div,

input[type=checkbox]:checked ~ div {

transition-duration: 1s;

transition-delay: 0

}

input[type=checkbox]:checked ~ div.changed {

left:400px;

}

</style>

<label for="toggle">Toggle Button</label>

<div class="changed">「Toggle Button」をクリックすると、

要素が右方向へ400px 移動します。</div>

初期状態での要素の位置はleft:0で、チェックが付くとleft:400pxの位置（右方向へ400px）へ移動します。

右方向へ移動した後に「Toggle Button」を再度クリックする（チェックが外れる）と、今度はleft:0の位置（左方向へ400px）へ戻ります。

要素を横移動させるデモ

2つの隣合う要素を伸縮させる

最後に、float で並べた2つの要素を、チェックを入れる・入れないで幅（widthの値）を変化させ、transition-durationで滑らかに伸縮する動きを作ってみます。

<style>
div.changed1 {
	float:left;
	width:200px;
	height:200px;
	padding:20px;
	background:#333;
	color:#fff;
}
div.changed2 {
	float:left;
	width:400px;
	height:200px;
	padding:20px;
	background:#888;
	color:#fff;
}

div,
input[type=checkbox]:checked ~ div {
	transition-duration: 1s;
	transition-delay: 0
}
input[type=checkbox]:checked ~ div.changed1 {
	width:400px;
}

input[type=checkbox]:checked ~ div.changed2 {
	width:200px;
}
</style>

<input type="checkbox" id="toggle">
<label for="toggle">Toggle Button</label>
<div class="changed1">「Toggle Button」をクリックすると、
2つの隣合う要素が伸縮します。</div>
<div class="changed2">「Toggle Button」をクリックすると、
2つの隣合う要素が伸縮します。</div>
</body>

<style>

div.changed1 {

float:left;

width:200px;

height:200px;

padding:20px;

background:#333;

color:#fff;

}

div.changed2 {

float:left;

width:400px;

height:200px;

padding:20px;

background:#888;

color:#fff;

}

div,

input[type=checkbox]:checked ~ div {

transition-duration: 1s;

transition-delay: 0

}

input[type=checkbox]:checked ~ div.changed1 {

width:400px;

}

input[type=checkbox]:checked ~ div.changed2 {

width:200px;

}

</style>

<label for="toggle">Toggle Button</label>

<div class="changed1">「Toggle Button」をクリックすると、

2つの隣合う要素が伸縮します。</div>

<div class="changed2">「Toggle Button」をクリックすると、

2つの隣合う要素が伸縮します。</div>

</body>

ちょっとややこしいので、実際の動きは以下のデモを御確認ください。

2つの隣合う要素を伸縮させるデモ