1

enter image description here

I've been searching for a few days for an answer to this. The option element is not getting styled. Currently, I'm not sure if it's this user agent stylesheet overriding my style for the option element. I tried styling the option in my own CSS file however it gets canceled out. Every other HTML element on the same page is working and is styled correctly. It's just the element. I'm also using bootstrap.

What I've tried to solve:

  1. add classes
  2. add id
  3. add !important
  4. inline styling

Basically everything to target a specific/all option element(s) but it all does not seem to work. I'm not sure if I'm doing it right. Or is there something I'm missing which I can't seem to see? Thank you for your suggestions.

select#cur_to option{
  background-color: white !important;
  color: black !important;  
}

<div class="form-group col-md-3">  
     <select class="select-drop form-control" style="font-size:25px; height:56px;" id="cur_to" name="currency_to">     
        <?php
          for ($row = 0; $row < count($data); $row++) {
            echo "<option>".$data[$row]["currency_code"]."</option>";         
          }
        ?>    
      </select>    
</div>
Michelle Ler
  • 55
  • 1
  • 7
  • Can you include a code snippet and explain exactly what is "not working" – StudioTime Aug 07 '20 at 04:47
  • Is your css enqueued? If it is you can include a `dependency`... this may overcome it not being a priority... refer: https://developer.wordpress.org/reference/functions/wp_enqueue_style/ – Aliqua Aug 07 '20 at 04:59
  • Does this answer your question? [How do I style a – FluffyKitten Aug 07 '20 at 05:02
  • As @Andres has written in his answer, there are only a couple of things you can do to style ` – shivaramanaiyer Aug 07 '20 at 05:09

1 Answers1

0

Styling option tags it's almost impossible, you can only style a few things.

Since you have bootstrap installed, you can add this plugin for this purpose: https://github.com/davidstutz/bootstrap-multiselect

Andres
  • 26
  • 3