将ID或类设置为单选按钮变体

Question

我试图在我的woocommerce网站上着色我的单选按钮。  问题是，这些单选按钮没有类或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

很有趣！根据您的标签为您的单选按钮添加ID。

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