use different css classes for different custom option values

Question

When i inspect Custom option values which are displaying in product view page , i got below code is reason to display those values.

code :

<span id="options-<?php echo $_option->getId() ?>-container"></span>

inspect element :

enter image description here

here, is there any chance we can display different color for different custom option values, for example, Black => Black, Green => Green .

can we use different css classes or ids for each value ?

<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
 <div class="input-box">
 <?php echo $this->getValuesHtml() ?>
 <?php if ($_option->getIsRequire()): ?>
 <?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
 <span id="options-<?php echo $_option->getId() ?>-container"></span>
 <?php endif; ?>
 <?php endif;?> 
 </div>
</dd>

• Mujahidh: You can use swatches for that and also you can write your own css(.options_453_3{}, .options_453_2{}) for the ids and use it.Only you can add the option_id as your class.
• Baby in Magento: @mujas i am using simple product with custom options , i am not using configurable product, can you please tell what is the css class for code i posted in question , is it _455_2 ?
• Mujahidh: If these options are same for every products.You can write css class like options_453_3{}, .options_453_2{} and apply these classes to your label dynamically.
• Baby in Magento: yes, we have same values :Black & Green for all products, i tried adding internal css as .options_453_3 { color : red; } .options_453_2 { color : red; } , but it did't displayed in "red" color..... is the way i am doing is right ?
• Mujahidh: <span class="label" style=" background-color: black; "><label for="options_453_2">Black </label></span> you can use like this.instead of writing black you can use the label value.better you can use different classes.

Answer 1

there is not straight way to do it you can do it by javascript

This solution for dropdown

 var x = document.getElementById("mySelect"); //select id here
 var i;
 for (i = 0; i < x.length; i++) {
 tex=x.options[i].text; // option text 
 var tex = tex.toLowerCase(); //make it lower
 x.options[i].style.backgroundColor = tex; // set the background color for that
 }

you can use css

 label[for=options_455_2]
 {
 /* ...add css here... */
 }

• Baby in Magento: i tried like this , seems i am doing something wrong, please check this : var x = document.getElementById("options_455_2"); //select id here var i; for (i = 0; i < x.length; i++) { tex=Black.options[i].text; // option text var tex = tex.toLowerCase(); //make it lower x.options[i].style.backgroundColor = red; // set the background color for that }
• Baby in Magento: if you check link & update the answer as per my requirement, that will be really helpfull..... , "custom option value" = black.....
• Qaisar Satti: @BabyinMagento added the simple solution for you
• Baby in Magento: yes, now i can apply different css for different custom values, give me 10 min, i have one more doubt.....