IDまたはクラスをラジオボタンのバリエーションに設定する

Question

私は自分のラジオボタンを私のウ - コマースのウェブサイトで色づけしようとしています。 問題は、それらのラジオボタンにクラスまたはIDがないことです。私はそれらをそれぞれ別々に色づけることができる方法はありますか？ 私は20の製品のように持っているので、可能ならばそれらのアイテムを完全にコントロールしたいと思います。ここで

はあなたが何のIDまたはクラスを見ていないし、持つことができるのと同じラベルを持つラジオボタンと私の表の例である：

---

---

Answer 1

他の方法があります。クラスIDの外でCSSの要素をターゲットにする。いくつかの例は、属性セレクタ（たとえばname="something"）、:nth-child()、または:nth-of-type()です。ラジオ入力ボタンの色を変更することはdifficultです。通常は、入力を隠して、ラベルのfor属性と入力のid属性を使用して入力をラベルにリンクする方が良いでしょう。代わりにラベルをスタイリングしてください。

input[name="attribute_pa_size_thinoptics"] { 
 
    margin-left: 5em; 
 
} 
 

 
input:nth-child(2) { 
 
    margin-left: 10em; 
 
} 
 

 
input[type="radio"]:nth-of-type(1) { 
 
    margin-left: 15em; 
 
}

<table class="variations" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="label"><label for="pa_size_thinoptics">Size</label></td> 
 
     <td class="value"> 
 
     <div class="vari-option fix"><label for="attribute_pa_size_thinoptics">1.0</label><input type="radio" name="attribute_pa_size_thinoptics" value="1-0" checked="checked"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_size_thinoptics">1.5</label><input type="radio" name="attribute_pa_size_thinoptics" value="1-5"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_size_thinoptics">2.0</label><input type="radio" name="attribute_pa_size_thinoptics" value="2"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_size_thinoptics">2.5</label><input type="radio" name="attribute_pa_size_thinoptics" value="2-5"></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="label"><label for="pa_thin-color">Color</label></td> 
 
     <td class="value"> 
 
     <div class="vari-option fix"><label for="attribute_pa_thin-color">Black</label><input type="radio" name="attribute_pa_thin-color" value="black" checked="checked"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_thin-color">Blue</label><input type="radio" name="attribute_pa_thin-color" value="blue"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_thin-color">Purple</label><input type="radio" name="attribute_pa_thin-color" value="purple"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_thin-color">Red</label><input type="radio" name="attribute_pa_thin-color" value="red"></div> 
 
     <div class="vari-option fix"><label for="attribute_pa_thin-color">White</label><input type="radio" name="attribute_pa_thin-color" value="crystal-clear"></div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

は、ここでは、代わりに入力のラベルのスタイルを設定する方法の例です。

input { 
 
    display: none; 
 
} 
 
label { 
 
    display: block; 
 
    width: 1em; height: 1em; 
 
    border-radius: 50%; 
 
    margin: 0 0 1em; 
 
    border: 1px solid #333; 
 
    transition: padding .25s; 
 
} 
 
.error { 
 
    background: red; 
 
} 
 
.success { 
 
    background: green; 
 
} 
 

 
input:checked + label { 
 
    padding: .25em; 
 
}

<input type="radio" id="radio" name="foo"><label for="radio" class="error"></label> 
 
<input type="radio" id="radio2" name="foo"><label for="radio2" class="success"></label>

Answer 2

私はあなたが探している内容を正確に把握していない、この答えをチェックしてください、私はラジオボタンに動的にIDを追加した、ちょうどそれらの両方が異なるIDを持っているチェックボックスを検査し、ただ、このコードでHTMLページを試してみて、あなたはそれらのそれぞれ異なっ

$(function(){ 
 
    count = 1; 
 
    $('input[type="radio"]').each(function(index, element) { 
 
    $(this).attr('id', 'radio' + count); 
 
    count++; 
 
    }); 
 
});

<div class="someDiv"> 
 

 
<input type="radio" name="gender" value="male" checked> Male<br> 
 
<input type="radio" name="gender" value="female"> Female<br> 
 
<input type="radio" name="gender" value="other"> Other 
 

 
</div><!-- /.someDiv --> 
 

 
<div class="someDiv2"> 
 

 
<input type="radio" name="gender" value="male" checked> Male<br> 
 
<input type="radio" name="gender" value="female"> Female<br> 
 
<input type="radio" name="gender" value="other"> Other 
 

 
</div><!-- /.someDiv --> 
 

 
<div class="someDiv3"> 
 

 
<input type="radio" name="gender" value="male" checked> Male<br> 
 
<input type="radio" name="gender" value="female"> Female<br> 
 
<input type="radio" name="gender" value="other"> Other 
 

 
</div><!-- /.someDiv --> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.js">

それをスタイルすることができます

Answer 3

HAVE FUN！ラベルに基づいてラジオボタンにIDを追加します。

<script> 
jQuery(function(){ 
    jQuery('input[type="radio"]').each(function(index, element) { 
jQuery(this).attr('id', 'radio-' + jQuery(this).val()); 
    }); 
}); 
</script>