ラジオボタンの色分けはどうですか？

Question

私はこのデモを持っていますhttp://codepen.io/anon/pen/qZjOWj私が欲しいのは、ユーザーが最初のラジオボタンを押すと青くなる必要があり、秒になると緑になる必要があるということです。なにか提案を？

div { 
 
    margin: 0 0 0.75em 0; 
 
} 
 

 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
input[type="radio"] + label { 
 
    color: #292321; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
} 
 

 
input[type="radio"] + label span { 
 
    display: inline-block; 
 
    width: 19px; 
 
    height: 19px; 
 
    margin: -1px 4px 0 0; 
 
    vertical-align: middle; 
 
    cursor: pointer; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
} 
 

 
input[type="radio"] + label span { 
 
    background-color: white; 
 
    border: 1px solid black; 
 
} 
 

 
input[type="radio"]:checked + label span { 
 
    background-color: blue; 
 
    border: 1px solid blue; 
 
} 
 

 
input[type="radio"] + label span, 
 
input[type="radio"]:checked + label span { 
 
    -webkit-transition: background-color 0.4s linear; 
 
    -o-transition: background-color 0.4s linear; 
 
    -moz-transition: background-color 0.4s linear; 
 
    transition: background-color 0.4s linear; 
 
}

<div> 
 
    <input type="radio" checked="checked" id="radio01" name="radio" /> 
 
    <label for="radio01"><span></span>Radio Button 1</label> 
 
</div> 
 

 
<div> 
 
<input type="radio" id="radio02" name="radio" /> 
 
<label for="radio02"><span></span>Radio Button 2</label> 
 
</div>

Answer 1

、あなただけのいずれかのラジオボタンがチェックされているか否かを確認し、青色のそれをペイントしています。オプションを作成して、ラジオボタンを異なるようにする必要があります（たとえば、異なる色を使用する場合など）。

クラスはこれには最適ですが、この機能はかなり意味があります。それは次のようになりますように は、あなたのHTMLを適応：。

：ラジオボタンは、今では、今あなたが別々にそれらにアクセスすることができます（そのクラスの属性にどのように異なるか

<div> 
    <input type="radio" checked="checked" class="blue" id="radio01" name="radio" /> 
    <label for="radio01"><span></span>Radio Button 1</label> 
</div> 

<div> 
<input type="radio" id="radio02" class="green" name="radio" /> 
<label for="radio02"><span></span>Radio Button 2</label> 
</div> 

はお知らせ

をこのようなあなたのCSSを適応させます

input[type="radio"].green:checked + label span{ 
    background-color:green; 
    border:1px solid blue; 
} 

input[type="radio"].blue:checked + label span{ 
    background-color:blue; 
    border:1px solid blue; 
} 

今、あなたのCSSは緑、そのクラスは、青、青、緑に分類したものに設定されているラジオボタンをペイントします。

Answer 2

ちょうどそして円に異なる色を適用するクラスを追加したり、nth-childセレクタ等を用いて第2のdivを標的とすることができます。あなたのCSSで今

Updated Pen

div:nth-child(2) input[type="radio"]:checked + label span { 
    background: green; 
}