How to change the Options Font Color in Dropdown

Question

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

It works on the Firefox browser also. What do you mean "other browser"? — The KNVB, Feb 08 '23 at 06:02
I give you an example for your reference. By the way, have you upgraded your browser? https://jsfiddle.net/vg15d92h/1/ — The KNVB, Feb 08 '23 at 06:15
[How to create a custom select box](https://www.w3schools.com/howto/howto_custom_select.asp) — Brett Donald, Feb 08 '23 at 06:24
This answer your question? https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element — Rolanda, Feb 08 '23 at 09:49

score 2 · Answer 1 · answered Feb 08 '23 at 09:37

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>

I want to dynamically add the font color, but this thing is not working on any browswer except Google chorome on windows or linux. Other browsers are applying their own css to the select dropdowns — Syed Hassan Zamir, Feb 10 '23 at 09:31

score 0 · Answer 2 · answered Feb 08 '23 at 05:55

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.

score 0 · Answer 3 · answered Jun 30 '23 at 07:22

If you cannot fix the problem by using php, maybe javascript is a solution for you.

Try this

let htmlCollection = document.getElementById("c_color_id_main").children;
      Array.from(htmlCollection).forEach((element)=>{
        console.log(element);
        // do something
      });

With children you get a HTMLCollection, which you have to convert into an array. Then you can iterate through and set your styles.

How to change the Options Font Color in Dropdown

3 Answers3