Question

I’m trying to style the “sort by” dropdown box on the magento products grid page using css.

I would consider myself pretty good at targeting and styling elements with css , but for the life of me i cannot find or style this dropdown box.

I have got as far as styling the backgound using input.input-text:focus,select:focus,textarea:focus { background-color:#FFCCFF; } line 182 in styles.css. but cant find the hover element (blue color) on mouse over..?

I’ve tried stying “select option” and all sorts of combinations of :focus and :hover

I’ve also looked at some javascript but cant see anything there..?

Any help would be appreciated the live url is http://www.magento.ledgemonkey.com/index.php/shoes.html?dir=asc&order=price

Answer 1

I don’t see a :hover rule set for form elements like this… so just add another rule.

input.input-text:hover,select:hover,textarea:hover { background-color:#FFCCFF; }

I get that there’s a hesitation to modify the imposing magento style sheet too much. But its yours. go nuts.