Display Number Dropdown Selector CSS Styling???

[gringo211985]

Hi there,

I want to style the drop down for the "display by number" box in the category pages, I have tried scouring with inspect element and firebug, I've looked through the forums and I have even looked at 3rd party templates and none of which have styled this part.

Can someone please give me an example of how to style the "display by number drop down"?

I have a white n red site and having that single drop down in blue will really hinder the design of the website.

Thanks,
Richard

[GJC Web Design]

very browser dependent but stuff like this can work - btw the style comes from the browser

IMHO only a grad or image will work for :checked

.orderby-displaynumber .inputbox > option:checked {
  background: rgba(0, 0, 0, 0) linear-gradient(#5a2569, #5a2569) repeat scroll 0 0;
}

.inputbox > option:hover, .inputbox > option:active, .inputbox > option:focus {
  background:red;
}

[gringo211985]

Hi GJC,

Thanks for the quick reply, I've tried and it seems the browser is still overriding it for me. It's quite annoying with it being the only blue part of the website, would it be possible to change from <option> to another class which would make it easier to style?

Thanks,
Richard

[Spiros Petrakis]

As far as  i know there in no CSS only cross browser solution to style option elements , you will need js to create a different layout that is possible to be styled exactly as you like , check the following link for example
http://www.jankoatwarpspeed.com/reinventing-a-drop-down-with-css-and-jquery/ 

[jenkinhill]

Not tried, but would a "sledgehammer" approah like    select  { color: #5aa656; }  work?