News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Display Number Dropdown Selector CSS Styling???

Started by gringo211985, September 03, 2015, 13:55:38 PM

Previous topic - Next topic

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;
}
GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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/ 
Joomla templates and extensions development
https://www.yourgeek.gr

jenkinhill

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

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum