Styling country select element in checkout form

paradoxx's picture
paradoxx
Fri, 09/25/2015 - 04:13
#1
Styling country select element in checkout form

I have a question about styling a select element on one of the checkout pages in orenmode theme.

When user selects a country for example the hover and option list border color is set to blue :

Image title

Is there a way to set this to #84754e , the gold color in my customisation ?

According these threads, there are some tricks to make it possible using CSS, but it's not a fully browser independent solution: 
http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover
http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html
http://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown 

Thanks upfront for your reply.

phuonght's picture
phuonght
Fri, 09/25/2015 - 04:49

Hi,

This select list is a form control so you can not style/css it. It means background color of selected item can not be customised by using CSS.

If you would like to customise, you must to change it from <select> tag to <ul> tag. Please take a look at example at the link below:

http://gregfranko.com/jquery.selectBoxIt.js/
Only after you successfully change from <select> tag to <ul> tag, you can style it.

Log in or register to post comments
Have More Idea?

We are here to build your website!

No Universal solution fits all special business requirements. Our experienced team is ready with ideas and state-of-the-art technical solutions to consult the best solution within your budget.