ラジオボタンの装飾（色の違う2重の枠線）方法について

解決済

質問者：some375
質問日時：2019/12/01 11:31
回答数：4件

ラジオボタンをチェックした時に、円の周りに色の違う二本の枠線を付けたいです。
例えば、18×18pxの正円の周りに2pxの白線とさらにその周りに1pxの青線をつけるという装飾がしたいのですが、どうしたらいいのか教えて頂けないでしょうか。
どうぞよろしくお願いいたします。

イメージ画像をつけました。
一番左がチェック時のボタンイメージです。

補足日時：2019/12/02 22:17
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： yambejp
回答日時：2019/12/04 10:17

> できればCSSで装飾したいので

#3を応用すると以下でできます
<style>
[name=hoge]{
display:none;
}
[name=hoge]:checked ~ span:before{
content:url(data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPg0KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOSIgc3Ryb2tlPSJ0ZWFsIiBmaWxsPSJ3aGl0ZSIgLz4NCjxjaXJjbGUgY3g9IjEwIiBjeT0iMTAiIHI9IjciIGZpbGw9InRlYWwiIC8+DQo8L3N2Zz4NCg==);
}
[name=hoge]:not(:checked) ~ span:before{
content:url(data:image/svg+xml;base64,PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiPg0KPGNpcmNsZSBjeD0iMTAiIGN5PSIxMCIgcj0iOCIgZmlsbD0ic2lsdmVyIiAvPg0KPC9zdmc+DQo=);
}
</style>
<label>
<input type="radio" name="hoge">
<span>会社員</span>
</label>
<label>
<input type="radio" name="hoge">
<span>主婦</span>
</label>
<label>
<input type="radio" name="hoge">
<span>学生</span>
</label>

- 0
- 件

通報する

この回答へのお礼

二度も具体的に教えて頂き、ありがとうございます。
やはり画像を使うといいようですね。
SVGも勉強になりましたので、ベストアンサーとさせて頂きます。

通報する

お礼日時：2019/12/04 23:01

No.3

回答者： yambejp
回答日時：2019/12/03 09:45

<style>

[name=hoge],[name=hoge] ~ svg{
display:none;
}
[name=hoge]:checked ~ svg.on{
display:inline
}
[name=hoge]:not(:checked) ~ svg.off{
display:inline
}
</style>
<label>
<input type="radio" name="hoge">
<svg width="20" height="20" class="off">
<circle cx="10" cy="10" r="8" fill="silver" />
</svg>
<svg width="20" height="20" class="on">
<circle cx="10" cy="10" r="9" stroke="teal" fill="white" />
<circle cx="10" cy="10" r="7" fill="teal" />
</svg>
会社員</label>
<label>
<input type="radio" name="hoge">
<svg width="20" height="20" class="off">
<circle cx="10" cy="10" r="8" fill="silver" />
</svg>
<svg width="20" height="20" class="on">
<circle cx="10" cy="10" r="9" stroke="teal" fill="white" />
<circle cx="10" cy="10" r="7" fill="teal" />
</svg>
主婦</label>
<label>
<input type="radio" name="hoge">
<svg width="20" height="20" class="off">
<circle cx="10" cy="10" r="8" fill="silver" />
</svg>
<svg width="20" height="20" class="on">
<circle cx="10" cy="10" r="9" stroke="teal" fill="white" />
<circle cx="10" cy="10" r="7" fill="teal" />
</svg>
学生</label>

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
SVGを知りませんでしたので、勉強になりました。
できればCSSで装飾したいので、参考に作ってみます。

通報する

お礼日時：2019/12/04 01:52

No.2

回答者： gura_
回答日時：2019/12/02 11:02

some375さん

>･･･どうしたらいいのか･･･････････

そのようなチェック用画像を用意すればよいでしょう。

例えば↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
label{
font-size: 32px; /* チェック画像の大きさと合わせる */
}
.radio {
display: none; /* 既定画像を非表示にする */
}
.radio + .radio-icon:before {
content: url(https://oshiete.xgoo.jp/images/v2/common/profile … /* 未チェック画像 */
}
.radio:checked + .radio-icon:before {
content: url(https://oshiete.xgoo.jp/images/v2/common/profile … /* 既チェック画像 */
}
</style>
</head>
<body>
<br>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン1
</label>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン2
</label>
<label>
<input type="radio" name="radio" class="radio" />
<span class="radio-icon"></span>
ラジオボタン3
</label>
</body>
</html>