How to change the Options Font Color in Dropdown

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    </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

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>

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.color-and-font {
    font-size: 24px;
    color: red;
    background: #b4b3b3;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

</div>

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.

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.