CSS not working after Commerce AJAX processed on field I have got a problem with css after Drupal processes radio buttons on Drupal Commerce product page. Radio buttons are formatted (images instead of typical radio)

Formatted radios



After clicking any of radio buttons:



The HTML:

&lt;div class="form-item form-type-radios form-item-attributes-field-pack-size"&gt;
    &lt;label for="edit-attributes-field-pack-size"&gt;Pack size &lt;/label&gt;
    &lt;div id="edit-attributes-field-pack-size" class="form-radios"&gt;
        &lt;div class="form-item form-type-radio form-item-attributes-field-pack-size"&gt;
            &lt;input type="radio" id="edit-attributes-field-pack-size-50-grams" name="attributes[field_pack_size]" value="50 grams" checked="checked" class="form-radio ajax-processed"&gt;  &lt;label class="option" for="edit-attributes-field-pack-size-50-grams"&gt;50 grams &lt;/label&gt;

        &lt;/div&gt;
        &lt;div class="form-item form-type-radio form-item-attributes-field-pack-size"&gt;
            &lt;input type="radio" id="edit-attributes-field-pack-size-100-grams" name="attributes[field_pack_size]" value="100 grams" class="form-radio ajax-processed"&gt; 
            &lt;label class="option" for="edit-attributes-field-pack-size-100-grams"&gt;100 grams &lt;/label&gt;

        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


The SCSS is:

    #edit-attributes-field-pack-size {
        overflow: hidden;
        input {
            opacity: 0;
        }

        label[for|="edit-attributes-field-pack-size"] {
            display: block;
            width: 102px;
            height: 102px;
            background: url('/sites/all/themes/blissout/img/radio.png') no-repeat;
            text-indent: -1000px;
            overflow: hidden;
        }
        label[for|="edit-attributes-field-pack-size-50-grams"] {

        }
        label[for|="edit-attributes-field-pack-size-100-grams"] {
            background-position: -102px 0;
        }
        label[for|="edit-attributes-field-pack-size-500-grams"] {
            background-position: -204px 0;
        }
    }


And it works perfectly until the ajax is "preprocessed" on radios. That Ajax calculates the price depending on the size of selection (it's drupal commerce code). It's different product variation but the classes doesn't change. 

I have tried putting CSS into html.tpl.php. If the trigger('create') is solution could someone describe me step by step how to write js/jquery code for it?
The problem is you're relying on an ID for your CSS selector, but when Drupal's Forms API refreshes a form via #ajax, it appends a numeric suffix to the ID to maintain a unique ID prior to replacement. Your CSS no longer applies because the selector no longer matches any element on the page. You should switch this to some class based selector instead.