前提・実現したいこと
お世話になっております。HTMLとCSSのみで装飾されたラジオボタンを実装しようとしております。
複数箇所用意したいのですが、そうすると全ての箇所のラジオボタンが全て一つの選択肢のうちと見なされてしまうようです。CSSとHTMLだけで装飾されたラジオボタンを実装する場合、これをそれぞれ違うラジボタンとして独立して動作するように実装することはできるものなのでしょうか?アドバイス頂戴できますと幸甚です。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Passport</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 </head> 8 <body> 9 <div class="searchbox2"> 10 <div class="sign"> 11 <p>XXX</p> 12 </div> 13 14 <div class="radio"> 15 <input type="radio" name="radio" class="radio-input" id="radio-01"> 16 <label for="radio-01">AAA</label><br> 17 <input type="radio" name="radio" class="radio-input" id="radio-02"> 18 <label for="radio-02">BBB</label><br> 19 </div> 20 21 </div> 22 23 <div class="searchbox3"> 24 <div class="sign"> 25 <p>YYY</p> 26 </div> 27 28 <div class="radio"> 29 <input type="radio" name="radio" class="radio-input2" id="radio-03"> 30 <label for="radio-03">CCC</label><br> 31 <input type="radio" name="radio" class="radio-input2" id="radio-04"> 32 <label for="radio-04">DDD</label><br> 33 </div> 34 </div> 35 36 <script src="js/main.js"></script> 37 38 </body> 39</html> 40
CSS
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Passport</title> 6 <link rel="stylesheet" href="css/styles.css"> 7 </head> 8 <body> 9 <div class="searchbox2"> 10 <div class="sign"> 11 <p>XXX</p> 12 </div> 13 14 <div class="radio"> 15 <input type="radio" name="radio" class="radio-input" id="radio-01"> 16 <label for="radio-01">AAA</label><br> 17 <input type="radio" name="radio" class="radio-input" id="radio-02"> 18 <label for="radio-02">BBB</label><br> 19 </div> 20 21 </div> 22 23 <div class="searchbox3"> 24 <div class="sign"> 25 <p>YYY</p> 26 </div> 27 28 <div class="radio"> 29 <input type="radio" name="radio" class="radio-input2" id="radio-03"> 30 <label for="radio-03">CCC</label><br> 31 <input type="radio" name="radio" class="radio-input2" id="radio-04"> 32 <label for="radio-04">DDD</label><br> 33 </div> 34 </div> 35 36 <script src="js/main.js"></script> 37 38 </body> 39</html> 40
補足情報(FW/ツールのバージョンなど)
ATOMエディタ、CHROME
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。