Q&A
色付きとはどういうことでしょう？
選択されていないときはどうしたいのでしょう？
ラジオボタンの背景色とはどこのいろのことでしょう？
ボタンとはラベルの文字のことでしょうか？
手書きでいいので図示したた画像を付けた方が良いと思います
html5
<label>男
<input type="radio" name="man" class="male">
</label>
<label>女
<input type="radio" name="woman" class="female">
</label>
css3
ラジオボタンのみ装飾するにはどうすればいいでしょうか？
１．ボタンをクリックしたら色付きの ○ を表示させる。
２．男ボタンに ○ 表示されているとき、女ボタンをクリックしたら男ボタンの ○ 表示が消える。
３．ラジオボタンとしての大きさ、背景色をを付ける。ボタンの中に文字は入れない。
画像をボタンにするよう試みました。
結果、画像は表示されましたが選択しても色が変わりませんでした。
section>
<input id="male.jpg" type="radio" value="male.jpg" name="image">
<!--ラジオボタン男イラストで設定する-->
<label for="male.jpg">
<img src="image/male.jpg" width="50" height="50"
</label><!--ラジオボタン男のイラスト画像-->
</section>
css
/*ラジオボタンの○を消す*/
input[type="radio"]{
display: none;
}
/* 画像の周りに隙間をあける */
label img {
margin: 3px;
padding: 5px;
}
/* 未選択の場合、色を薄くする */
input[type="radio"] + label img {
opacity:0.2;
}
/* 選択済みの場合、色を濃くする */
input[type="radio"]:checked + label img {
opacity:2;
}
回答に追記したリンク先をみてください
前回教えていただきました画像をボタンにする装飾ですが、
表示されて選択できるようになりました。
しかし、一度選択した画像をもう一度選択すると解除にならず、
両方選択された状態になってしまします。
解決方法を教えていただけますか？
まずは画像ラジオボタンを解決したいと思いますので、
よろしくお願いいたします。
> しかし、一度選択した画像をもう一度選択すると解除にならず、
> 両方選択された状態になってしまします。
そもそもラジオボタンはチェック状態でクリックしても解除にはなりません
また両方選択されるのは、おそらくnameが異なっているからです。
ラジオボタンの基本が学習してください
チェックしてあるラジオボタンをクリックで消す方法をcodepenに追記しておきました
ようはチェックボックスをjsで制御するだけです
input[type="radio"] {
display: none;
}を外したらボタン表示で画像ごと切り替えができました。
ｊｓの勉強はこれからやってみます。
ありがとうございました。
ベストアンサー
