フォームのチェックボックスをボタン風にする

依頼があり、やった。CSSでできる。結構便利だなとおもた。チェックボックスが消えて、選択項目がボタンになる。クリックでチェックされる。ボタンの色が変わる。

<p>どの動物をお供に連れていく？</p>
<label><input type="checkbox" value="いぬ" name="animal"><span>いぬ</span></label><!--
--><label><input type="checkbox" value="さる" name="animal"><span>さる</span></label><!--
--><label><input type="checkbox" value="きじ" name="animal"><span>きじ</span></label>

label {
	margin-right: 5px; /* ボタン同士の間隔 */
}
label input {
	display: none; /* デフォルトのinputは非表示にする */
}
label span {
	color: #333; /* 文字色を黒に */
	font-size: 14px; /* 文字サイズを14pxに */
	border: 1px solid #333; /* 淵の線を指定 */
	border-radius: 20px; /* 角丸を入れて、左右が丸いボタンにする */
	padding: 5px 20px; /* 上下左右に余白をトル */
}
label input:checked + span {
	color: #FFF; /* 文字色を白に */
	background: #FBB; /* 背景色を薄い赤に */
	border: 1px solid #FBB; /* 淵の線を薄い赤に */
}

【初心者でもわかる】CSSでボタン風のチェックボックス作る方法

山形市の天気は、曇りのち雨。33.2/24.7。

中体連準備。上山でケア設置。

2026年7月17日（金曜日）

関連キーワード

関連記事

令和8年7月17日

• 平成37年7月17日
• 昭和101年7月17日
• 旧6月4日
• 文月

今日は何の日

• 世界絵文字デー
• 漫画の日
• 理学療法の日
• 東京の日
• 国際司法の日
• セントラル浄水器の日
• 喜多方ラーメンの日
• 国産なす消費拡大の日
• いなりの日
• 減塩の日
• 茅舎忌
• 秋桜子忌
• こちらから引用