Question 11279 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to change the Options Font Color in Dropdown – Jquery

I am dynamically creating options for dropdown I want to add diffrent font color on each of option in dropdown. This is working on Google chorome but not on ther browsers.
How to solve this problem
Thanks!!

Here is my code

`<div class="control">
            <label for="c_color_id" id="c_color_id_main_label"> Select Color Code &nbsp;&nbsp; </label>
            <select name='c_color_id[0]' data-form-part="hairforadmin_formula_form" id="c_color_id_main"
                onchange="ColorCodeCurrent(this);">
                <?php foreach ($colors as $option) {
                if ($option['value'] == '') {?>
                <option value=""> Please Add Colors from backend </option>
                <?php } else {?>
                <option value="<?php echo $option['value'] ?>" style="color:<?php echo $block->getColorFontById($option['value']); ?>"><?php echo $option['label'] ?></option>
                <?php }
                }?>
            </select>
</div>`

I try to search on the internet but didnot find a simple solution that can quickly solve mt problem

Tags:

2

Answers


  1. 0

    Sorry bud, I don’t think it’s possible in other browsers. However you could create a completely custom drop down using CSS and JavaScript, then you can style everything in any way shape or form. I truly hope this helps.

    Login or Signup to reply.
  2. 0

    Here is your answer of changing color, back-ground and font size of options in a select list.

    <style>
    .color-and-font 
    {
       font-size: 16px;
       color: rgb(44, 44, 44);
       background: #b4b3b3;
    }
</style>
<div class="control">
    <label for="c_color_id" > Select Color Code </label>
    <select name="c_color_id[]" id="c_color_id_main">
        <option value="1" class="color-and-font">value 1</option>
        <option value="2" class="color-and-font">value 2</option>
        <option value="3" class="color-and-font">value 3</option>
        <option value="4" class="color-and-font">value 4</option>
    </select>

    .color-and-font {
    font-size: 24px;
    color: red;
    background: #b4b3b3;
}
    <div class="control">
    <label for="c_color_id" > Select Color Code </label>
    <select name="c_color_id[]" id="c_color_id_main">
        <option value="1" class="color-and-font">value 1</option>
        <option value="2" class="color-and-font">value 2</option>
        <option value="3" class="color-and-font">value 3</option>
        <option value="4" class="color-and-font">value 4</option>
    </select>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search