將ID或Class設置為單選按鈕的變體

Question

我正在嘗試為woocommerce網站上的單選按鈕着色。 問題是那些單選按鈕沒有類別或ID。 有什么辦法可以分別給它們上色？請記住，我有20種產品，因此，我希望盡可能對這些產品進行完美的控制。

這是我的表格的示例，其中帶有單選按鈕的標簽與您看到的標簽相同，並且沒有ID或類別：

---

---

Answer 1

還有其他在類ID之外將CSS中的元素作為目標的方法。 屬性選擇器（例如name="something" ） :nth-child()或:nth-of-type() name="something"例子。 值得注意的是， 很難更改單選按鈕的顏色。 通常最好隱藏輸入，並通過標簽上的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>