set ID or Class to radio buttons variation

Question

I'm trying to Colorize my radio buttons on my woocommerce website. The problem is, that those radio buttons don't have class or ID. Is there any way I can colorize each of them separately Keep in mind that I have like 20 products, so I want to achieve perfect control on those items if it is possible.

Here is an example of my Table with the Radio buttons that have the same label as you can see and have no ID or Class:

What are expected results? You have lots of classes available on parent tags — charlietfl, Jan 29 '17 at 01:43

score 0 · Answer 1 · edited May 23 '17 at 12:25

There are other ways to target an element in CSS outside of a class ID. A few examples are attribute selectors (name="something" for example), :nth-child(), or :nth-of-type(). It's worth noting that it's difficult to change the color of radio input buttons. You're usually better off hiding the input and linking the input to a label via the for attribute on a label and an id on the input, then styling the label instead.

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>

Here's an example of how you style the label instead of the input.

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>

Hi and thanks for the fast answer... My html is in the website .. it belong to my woocommerce.. i cant change it — sc0ob, Jan 29 '17 at 01:40
@sc0ob Hi, you're welcome. I don't understand - nothing I said requires you modify the markup. All of this you can do with your existing markup. It's all just CSS. — Michael Coker, Jan 29 '17 at 02:24

score 0 · Answer 2 · answered Jan 29 '17 at 02:04

I don't know exactly what you looking for , please check this answer , i have added ID dynamically to radio buttons , just inspect the check boxes both of them have different id's , just try with this code a html page and you can style it each of them differently

$(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">

Thanks alot for your answer.. sorry for late response. But is there anyway to add the value to the ID, the thing is ive got other products that needs different Colors.. i've got 20 products which sums up to 40-50 Colors . — sc0ob, Jan 29 '17 at 04:43

score 0 · Answer 3 · answered Feb 01 '17 at 02:17

0

HAVE FUN ! add id to your radio button according to your label.

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

answered Feb 01 '17 at 02:17

sc0ob

21
4

set ID or Class to radio buttons variation

3 Answers3