0

I'm wondering what might be causing my css to only be utilizing CERTAIN aspects in my code and not others in regards to a select/option dropdown.

Here's the code that should be loaded:

<style>
.dis {
  color: rgb(255,196,0);
  font-size: 20px!important;
  font-weight: bold!important;  
}
</style>

For options in the select that are disabled, I'd like the color, font size, and font weight to be set. However, as you can see from the screenshot below, only the color option is picking up.

enter image description here

.dis{} is being called, because the rgb(255,196,0) is picking up, and the font-size and font-weight options are not crossed out in Chrome's developer console, but they're not actually doing anything. What am I doing wrong here?

Update

The HTML:

<div class="btn-group">  
  <select class="btn btn-primary" onClick="note()" onChange="select(this.value)">
  <option value="" disabled selected>Filter</option>                                                       
  <?php                              
  foreach ($output as $sName => $o) {

    $ucName = strtoupper($sName);    
    print "<option class=\"dis\" value=\"\" disabled>$sName</option>";

    foreach ($o as $p) {          
      print "<option>$p</option>";
    }
  }                                

  ?>                                     
  </select>
<br>
</div>

Not a duplicate as I was strictly looking to style USING CSS, not Javascript, although yes, you can format using Javascript as well.

Brian Powell
  • 3,158
  • 4
  • 30
  • 59
  • could you please post your html here? – Pavel Mar 24 '15 at 16:48
  • 1
    You cannot style certain aspects of a select menu, and the way that the styles are interpreted will depend on the browser. Styling the option elements. There are a number of related posts about this, but the real answer is that once you run into a wall, you need to make a custom dropdown and not use select/option elements. – Matthew Darnell Mar 24 '15 at 18:43

1 Answers1

1

Try having the css for the font-size and font-weight on the <select> instead of the <option>

Rickkwa
  • 2,102
  • 4
  • 20
  • 34
  • Yeah, this works too. It's good in case anyone else searches this to look at Matthew Darnell's answer as well, since he makes a good point that there are certain browser defaults that you cannot change. I'll play around with it and see if I can get something I like. – Brian Powell Mar 24 '15 at 21:57