選択しやすいボタン1レスポンシブWebデザイン

Demo

HTML&CSS

HTMLindex.htmldownload

<input type="radio" name="name" value="" id="1" class="radio_button1">

<label for="1" class="radio_button2">選択1</label>

<input type="radio" name="name" value="" id="2" class="radio_button1">

<label for="2" class="radio_button2">選択2</label>

<input type="radio" name="name" value="" id="3" class="radio_button1">

<label for="3" class="radio_button2">選択3</label>

CSSstyle.cssdownload

.radio_button1{
	display: none;
}
.radio_button2{
	width: 5rem;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	border: 1px solid #ccc;
}
.radio_button1:checked + .radio_button2{
	color: #fff;
	background-color: #158fb5;
}
© 2025 wayday