CSSでラジオボタンをデザインする

こういう感じでいくつでも追加できるぞ

<div class="my-radio">
<label class="my-radio-buttons">
<input type="radio" name="I'm" value="devil">
<span class="my-radio-buttons-default">悪魔</span>
</label>
<label class="my-radio-buttons">
<input type="radio" name="I'm" value="angel">
<span class="my-radio-buttons-default">天使</span>
</label>
<label class="my-radio-buttons">
<input type="radio" name="I'm" value="science">
<span class="my-radio-buttons-default">科学</span>
</label>
</div>

CSSはこんな感じ

.my-radio-buttons {
cursor: pointer;
}
.my-radio-buttons > span {
display: block;
float: left;
padding: 5px;
background-color: #ddd;
}
.my-radio input[type="radio"] {
display: none;
}
.my-radio-buttons-default {
background-color: #ddd;
color: #222;
}
.my-radio .my-radio-buttons input[type="radio"]:checked + .my-radio-buttons-default {
background-color: #000;
color: #fff;
}

我ながらいいアイディアだと思った

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA