Jump to content


This topic is now archived and is closed to further replies.


change/restyle the dropdown menu/selector

Recommended Posts

I never liked the browser default arrow down selectors. That is the reason i created

this small tutorial that will show you how to change/restyle your dropdown selectors.

for example inside the create_account.php (country selector)


first open the file catalog/includes/functions/html_output.php and look for Output a form pull down menu (around line 292)


now there is probably more then just one way to do this i personally just copied the whole code from line 291 - 323 and renamed

tep_draw_pull_down_menu to tep_draw_pull_down_menu2 the reason why i did that is, i don't want to change "all" dropdown selectors.


now inside the copied tep_draw_pull_down_menu2 code look for


$field = '<select name="' . tep_output_string($name) . '"';


and change it to


$field = '<select class="dropdown" name="' . tep_output_string($name) . '"';


then look for Creates a pull-down list of countries (original line 326)


find this code


return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);


and change it to


return tep_draw_pull_down_menu2($name, $countries_array, $selected, $parameters);


now we have to set the definitions inside the css file


.dropdown {

padding: 4px 0 3px 3px;

height: auto;

width: 299px;

border: solid 1px #e0e0e0;

background: url(images/icons/ddarrow_down.png) no-repeat;

background-position: 275px 6px; /*Position of the arrow-image*/

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

-webkit-appearance: none; /* Removes default chrome and safari style*/

-moz-appearance: none; /* Removes default Firefox style*/

text-indent: 0.01px; /* Removes default arrow from firefox*/

text-overflow: ""; /* Removes default arrow from firefox*/



.dropdown::-ms-expand { /* Removes Default IE style*/

display: none;



the css code above is the one i am using so you have to change/adjust it to match your shop design.

as you can also see i removed the default browser created arrow down and added my own arrow down icon inside the image/icons folder.

(the icon is attached)

*regarding that icon, "I" created that icon myself so YOU have the rights to do with it as you please!

sell it, change it, use it, hell do what ever you want with it, i don't mind at all.

or create your own one.

Share this post

Link to post
Share on other sites

:thumbsup:  thought it was my fault had a few updates and the arrow went behind the original selector could not z-index strange



To improve is to change; to be perfect is to change often.


Share this post

Link to post
Share on other sites



unfortunately there is no solution so far. i just made my arrows a bit narrower so that they can hide behind the FF default arrow.

So now i have nice looking arrows in IE and Chrome and in FF the default arrows.

Let's just hope FF reconsider their changes and revert back to as it was, till then we have to live with it i guess.

Share this post

Link to post
Share on other sites




This tutorial is not working with the latest Firefox 30!


As far i know the latest Firefox is the only one that won't dance to the music, the other browser like Internet Explorer and Chrome should still be OK.

Don't know about Safari or Opera.

Share this post

Link to post
Share on other sites

It looks like Firefox (ver. 35.0.1) sorted it out and now it works again.


Tested with Internet Explorer 11, Chrome (ver. 40.0.2214.94 m) and Firefox (ver. 35.0.1) and all seems to be fine.

Share this post

Link to post
Share on other sites