How to style the Select Dropdown

Styling The Select

Styling the Select Dropdown using Javascript and CSS

Much like a frustrated wallflower on Prom night, we’ve decided that we’ve watched from the sidelines for too long now, and have decided to publish our first online tutorial; please be gentle all you veteran tutorial writers!

We’re going to show you a quick and easy way how to style the select dropdown; something that we’ve found difficult to get to grips with in the past. We’re using a script from Christian Heilmann, and kudos must go to his post on ‘Taming the select’ found here.

Why bother styling the select anyway?

Honey, I broke the website:- Select Dropdown examples with & without js / css styling

Select Dropdown Comparisons

You might argue that each browsers default elements are well known to the user and shouldn’t be messed with. That’s a valid point if you can get the select to marry visually with the rest of your site design – or simply just don’t care about the aesthetics. However, this is not so good if the default elements look terrible next to the gorgeous design you’ve spent so many painstaking hours / weeks / months putting together – even worse if you have a client that demands consistent styling across the site.

View Demo

Download Source


Header

Select Code
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type='text/javascript' src='js/select.js'></script>

An easy start, simply link to the css and javascript files within the header of your page. The js file works just fine on its own and there is no need to include any additional libraries. Please note that in the demo there are two versions of the js file. These are identical except in the second file (select_demo2.js) the classes have been changed to target the second demo select. You will only need to use the first script however.

HTML

Select Code
<form action="#">
    <p>
        <label class="label">Countries of the United Kingdom:</label>
        <select class="turnintodropdown">
            <option>Please select a country:</option>
                <option>England</option>
                <option>Northern Ireland</option>
                <option>Scotland</option>
                <option>Wales</option>
        </select>
    </p>
</form>

The HTML is pretty straightforward and consists of simple <select> tags and your options nested within, erm, <option> tags. The single most important element in the HTML to focus on is giving the <select> tag a class of ‘turnintodropdown’ (This class could of course have any name as long as you change it to match within the js file). Our js file will then be able to target all ‘selects’ within the document and apply a class to them that we can then style to our hearts desire.

How can I target select options ‘hardcoded’ within plugins?

For example, we needed to style the dropdown menu of popular WordPress plugin ‘Contact Form 7’ for a recent project, as well as the shipping selector dropdown menu of ‘Woocommerce’. This is as easy as adding the class ‘turnintodropdown’ to the relevant <select> tag and adding CSS as required.

Woocommerce Shipping Dropdown:
<select name="calc_shipping_country" id="calc_shipping_country" class="country_to_state turnintodropdown" rel="calc_shipping_state">

Contact Form 7 Dropdown:
[select id:country class:turnintodropdown "England" "Northern Ireland" "Scotland" "Wales"]

CSS

Select Code
.dropcontainer {
position: relative;
font-size: 16px;
color: #777;
}

.trigger {
color: #777;
padding: 10px;
font-size: 16px;
width: 50%;
background: #fff url(../images/select-arrow-open.png) 98% center no-repeat;
display: block;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.trigger:hover {
color: #777;
background: #f5f5f5 url(../images/select-arrow-open.png) 98% center no-repeat;
}

.activetrigger {
color: #777;
padding: 10px;
font-size: 16px;
width: 50%;
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
display: block;
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.activetrigger:hover {
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
color: #777;
}

.activetrigger:active {
background: #f5f5f5 url(../images/select-arrow-close.png) 98% center no-repeat;
color: #777;
}

.dropcontainer ul {
font-size: 16px;
border: 1px solid #ccc;
border-top: none;
background: #fff;
list-style-type: none;
padding: 10px;
margin: 0;
width: 50%;
z-index: 100;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.dropcontainer ul li {
padding: 5px;
}

.dropcontainer ul li:hover {
background: #f5f5f5;
outline: none;
}

.dropcontainer ul li:first-child {
display: none;
}

.dropcontainer ul li:last-child {
border-bottom: none;
}

.dropdownhidden {
display: none;
}

.dropdownvisible {
height: auto;
}

There’s nothing particularly special going on with our CSS although it’s worth pointing out that the dropdown has a background image used for the ‘trigger’ which changes from a downwards arrow on selection to an up arrow. You could add this image in as a sprite if you prefer.

Additionally, we gave our trigger area and dropdown list percentage widths so that the select would work perfectly within responsive sites. The demo has media queries added so you can see this effect working if you resize your browser width. We also added CSS transitions to make everything just that little smoother, but obviously these can be removed or adapted to suit.

Finally, in the second demo we made the height of the dropdown fixed and forced the overflow to scroll vertically. If you had a very long list of options the addition of a scrollbar is very useful to quickly navigate through them all. There’s only two lines to tweak in the CSS to effect this change:

Select Code
*/ Change this: 
/////////////// */

.dropdownvisible {
height: auto;
}

*/ To this: 
/////////////// */

.dropdownvisible {
    height: 200px;
    overflow-y: scroll;
    }

That’s all very well and good – but how does it shape up in different browsers?

Suprisingly well in fact. We tested on several browsers and found that the select dropdown was pretty much bullet-proof:

Firefox 24.0, Firefox 25.0, Firefox 26.0
Chrome 29.0, Chrome 30.0, Chrome 31.0
Opera 12.14, Opera 12.15, Opera 12.16
IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Hope you enjoyed our tutorial; please let us know if you found it useful!

Previous Article

Next Article

104 comments on “How to style the Select Dropdown

  1. I am not able to get this working with method post.

    Comment by Randy Bailey on March 23rd, 2014
  1. Hi Randy. Do you have an example that I could check out for you?

    Comment by Phil on March 24th, 2014
  1. Good implementation. Thanks for sharing this. One bug I noticed, is when you have multiple selects right next to each other (with no div/p/container to separate them), the javascript always picks the top select’s drop down.

    Comment by Joel Pratt on March 26th, 2014
  1. Hi Joel. Glad this was of some use; thanks for your comment. I’ll look into the issue you mentioned – if I get a moment to do so!

    Comment by Phil on March 27th, 2014
  1. Hello,
    I would like to know if you can easily, and how to introduce a optgroup in the demo 2.
    Thank you for your reply

    Comment by AlainW on April 17th, 2014
  1. Hi Alain. Are you able to provide any further details? Sorry, but not entirely sure of your question. Regards, Phil.

    Comment by Phil on April 17th, 2014
  1. In fact I have a page or template I use the html classical “form with php and pure css. It’s hard to adjusts and it’s not perfect. I would use the example of demo2 instead with optgroup tag. Unfortunately I’m not very good with javascript, but if you give me the first indications I’ll manage.
    Thank you

    Comment by AlainW on April 17th, 2014
  1. Hiya,

    I am using this in a project that uses ExpressionEngine as the CMS. My question is how to make the text in the dropdown behave like navigation. I am assuming that this dropdown will go to other pages or URLs. I actually need the dropdown to behave like navigation. Thanks for any help in advance.

    Comment by Melody on May 7th, 2014
  1. Hi, looks good in the styling but how do you get it to redirect to a url?

    Doesn’t seem to be working for me – don’t want to put a submit button there.

    Comment by Jon Smith on May 7th, 2014
  1. @Melody – did you find a solution? Is pretty much my urgently situation. If you get a fix can you post here?

    Comment by Jon Smith on May 8th, 2014
  1. Hi John. Thanks for your comment. Unfortunately I don’t have time to investigate a fix right now – sorry.

    Melody contacted me as follows:

    Hiya Phil,

    I have found a temporary resolution that functions the way I want but it doesn’t work if I apply your styles and js :( Here is what I did:

    Select Code
    <div id="leftTopDrop">
            <span class="headText">Our Locations</span>
            <div class="dropwrapper">
            <form method="post" action="{path='locations/index'}">
    <select id="drop">
    <option>Select a Location:</option>
    {exp:channel:entries channel="locations" category="not 3" orderby="title" sort="asc" dynamic="no"}
    <option value="{site_url}index.php/locations/{url_title}">{title}</option>
    {/exp:channel:entries}
    </select>
    </form>
            </div>

    I also added a function:

    // nav on locations page

    Select Code
    document.getElementById("drop").onchange = function() {
            if (this.selectedIndex!==0) {
                window.location.href = this.value;
            }        
        };

    As soon as I add your style class=”turnintodropdown_demo2″ to the select it stops functioning. If that helps you get closer to finding a way to make your code work with the function that I applied I would be grateful. Thanks for any assistance.

    Comment by Phil on May 8th, 2014
  1. Problems in your solution compared to normal drop down list:
    1. No indication of currently selected option when the list is displayed..
    2. Space key doesn’t work.
    3. Alt+arrow keys don’t work.
    None of browsers (IE, FF, Chrome, Opera, Safari) has any of these problems

    Pretty useless component. Sorry.

    Comment by mentallurg on May 26th, 2014
  1. Thanks for the comment, although ‘useless’ implies that something is ‘without use’; I’ve used this dropdown on several sites without any problems – or complaints. Granted, it’s not a perfect solution but I never claimed that it was. If you have any solutions rather than just stating problems then I’d love to see them – and perhaps you can share with others as well.

    Comment by Phil on May 26th, 2014
  1. Doesn’t seem to work in IE9 for me. If I open IE dev tools and switch browser mode to IE8, it works. Switch back to IE9 and it doesn’t work, the dropdown reverts to the standard styling. Anyone seen this?

    Comment by Jason on June 11th, 2014
  1. Ignore, fixed it by moving the script tag into the body below the dropdown.

    Comment by Jason on June 11th, 2014
  1. Issue when I select one box it opens and thats great, but when I click to open another the previous box stays open.

    How can I fix this. Onblur seems to be overridden by this script.

    Comment by bvil on June 16th, 2014
  1. How to get demo #2 to show the scroll bar on iOS? Currently it doesn’t show any indication that you can scroll the list on iOS 7.0.4. Oh, and this is HARDLY a useless component. FAH.

    Cheers,
    Karlos

    Comment by Karlos on June 17th, 2014
  1. Well, I found it. :)
    If you want the motion scroll on iOS and some other mobile devices, then change this:

    .dropdownvisible_demo2 {
    height: 200px;
    overflow-y: scroll;
    }

    to…

    .dropdownvisible_demo2 {
    height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    }

    Cheers,
    Karlos

    Comment by Karlos on June 17th, 2014
  1. Thanks Karlos for the great comments.

    Glad you managed to work out the motion scroll on iOS – and thanks for sharing.

    Comment by Phil on June 18th, 2014
  1. Is there a way to do this with actual anchor links that would connect you to another page when an option was selected? Similar to a select menu, not just a dropdown…

    Comment by Jacob on June 22nd, 2014
  1. Is there a way to close the dropdown by clicking elsewhere on the page?

    Comment by Phil on June 26th, 2014
  1. Hello PHIL. My name is Mike, and I live in Ukraine. Thank u for sharing this tutorial. Everything work perfect. But if u have some free time, can u help me? i need to make div content change, by clicking different options in select. Can u tell me how to do this? i found this article http://goo.gl/cVvMsh , but i can make it work(

    Comment by Mike on June 26th, 2014
  1. How can I implement two select boxes?
    I now have two select boxes, when I try to open the second select box the items from select box 1 opens.

    Comment by Mattthijs on July 4th, 2014
  1. please ignore my question. Problem is solved.

    Comment by Mattthijs on July 4th, 2014
  1. I would like it to close if clicking elsewhere too…

    Comment by Frank on July 4th, 2014
  1. I would like to know how to use multiple selects also.

    Comment by Jamie on July 18th, 2014
  1. Hi,
    How do you make this work with jquery mobile?

    Comment by rohit on July 27th, 2014
  1. Hi.

    Thank you very. This is a very nice implementation. :)

    I need some help. If I need the form to be submitted when a new value is selected in the dropdown, how can I implement it?

    Thank you in advance.

    /mathi

    Comment by Mathi Kumarathurai on August 5th, 2014
  1. I have another question. When the dropdowns are inserted by a Ajax call the modifications implemented in your script does not apply to the dropdown. I guess the Javascript should be altered to work equivalent what jQuery on/live does?

    Comment by Mathi Kumarathurai on August 5th, 2014
  1. Thank’s for sharing :)

    Comment by Bulent on August 28th, 2014
  1. No problem; hope this was of some use.

    Comment by Phil on August 30th, 2014
  1. Just wondering if there’s a way to make the dropdown list show the selected value? Like if selected=”selected” is set on one of the options, it is not shown as selected when I implement this. Any suggestions for this?

    Comment by Micah on September 3rd, 2014
  1. Brilliant! Thanks for sharing!

    Comment by Nick on September 3rd, 2014
  1. No worries Nick. Hope you can put it to some use.

    Comment by Phil on September 4th, 2014
  1. Is there a way to make the entire list element hover/clickable instead of only the text link inside?

    Kind of like DropKick.js

    Comment by Jacob on September 4th, 2014
  1. Nevermind, I solved that problem by adding “.dropcontainer ul li a { display:block; width:100%; }”

    Comment by Jacob on September 4th, 2014
  1. And to offset padding/scrollbars – set overflow-x:hidden; on the parent UL.

    Thanks for this great work, btw 😀

    Comment by Jacob on September 4th, 2014
  1. I rewrote this in jQuery if anyone needs…

    Comment by Luca on September 8th, 2014
  1. Hi there,

    I have an issue with the fixed demo option 2. Even though I have a set height, it pushes down my content below it, so what I need is for the dropdown to overlap the content below it on open??

    Please can you tell me how to achieve this.

    Warm wishes

    Comment by Sammy on September 10th, 2014
  1. I really like this styling. Great work! It’s much appreciated. I just have one problem though. When I try to select a specific option to be the first in the trigger it doesn’t work when I apply the class of turnintodropdown. Any tips on how to fix this?

    Thanks again. Great work

    Comment by Max on October 7th, 2014
  1. Hi Max. Do you have a link I could look at to see what you need help with? Thanks.

    Comment by Phil on October 7th, 2014
  1. Yeah here is part of the view http://pastebin.com/CDM9FBad. I
    put “selected” on the second option in the first select box. However it keeps selecting the first one all the time. When I take away the class turnintodropdown it works so I think the class is conflicting with “selected”. I just got into javascript so I can’t really find what in the select.js file might me creating this conflict ion. Have you experienced this problem or is it just me? I could be doing something else entirely wrong. Sorry I’m a newb when it comes to web development.

    Thank you so much for the reply. You are the best. I really do appreciate it very much.

    Comment by Max on October 7th, 2014
  1. Thank you for this tutorial. I seem to be having trouble because all of my dropdowns get their content (the options) dynamically when the page loads. When I followed this tutorial, I got a few errors in the select.js. I tried fixing those as seemed appropriate but then I could no longer populate my dropdowns. So, any insight? I would keep working on it- but I need to move on for now.

    Comment by Michael on October 15th, 2014
  1. Does not work in AB testing environments like Optimizely.

    Comment by HowardS on October 23rd, 2014
  1. Thanks for the input Howard.

    Comment by Phil on October 24th, 2014
  1. Thanks for the nice script. I was able to style it as I needed it to look like in my woo commerce wordpress theme but unfortunately the prices are not updating any longer.

    Usually woocommerce updates the price for the variation after one changes the selection. But with this script it doesn’t. Although the value is inserted as value into the original select element.
    Do you know how to trigger the “update price based on current variation”?
    Furthermore the “add to cart” button doesn’t appear if I select a variation for the first time where the cart button was hidden as no variation was selected previously.

    Working on local host so unfortunately there’s no URL to share.

    Thanks in advance!

    Comment by Felix on October 30th, 2014
  1. Looks wonderful but doesn’t function properly. When I tab to the select field and press the down key, nothing happens. I can easily see this leading to abandonments.

    Comment by Stacey on October 31st, 2014
  1. How do I make this work when using the form method POST?
    It’s simply no longer working when I add the class :/

    Comment by Matthias on November 8th, 2014
  1. Actually it works on Internet Explorer 5.5 too!! Amazing! (tested with IETester)

    Comment by Enrico on November 13th, 2014
  1. Hi, How do I show the “selected” option rather than the title of the dropdown? Thanks!

    Comment by Jo on November 13th, 2014
  1. Any ideas? ^^

    Comment by Jo on November 15th, 2014
  1. This would be really nice if it didn’t affect the default behavior of the select element. When I set a particual item to

    <option selected value=…

    The preselected value does not show,

    Comment by Guest on December 5th, 2014
  1. Hi, very smooth script. Only one, big for me, problem. When I use two select boxes, when I click the second I get the options from the first select box.

    Is there a solution for this?

    Thanks again

    Comment by Prokopis on December 10th, 2014
  1. hey there nice tutorial, I like how you put “please select a country” in the menu to act like the title. I would like to replicate this technique for my shop menu but since this “title” is in fact an option then the user can select it and add it to his cart… So how could i make the first option not selectable?

    Comment by Fred on December 28th, 2014
  1. I’m having the same issue as Prokopis. Im trying to use 2 select boxes on the same page and get the first box select options when clicking on the 2nd dropdown. If each box is put in a separate table or div, then they work correctly, but I need it in one div for a form submit.

    Comment by Brandon on January 9th, 2015
  1. How do I target a different class or even (more importantly) an id instead?

    I have a select form with no class, but the id #superfish-1-select which I want to target.

    I don’t want to edit the module’s template file it’s bad practice.

    Comment by Pete Wallis on February 1st, 2015
  1. Great Code. My only issue is, on page refresh, the value of the select box is not retained.

    It seems to be failing at:
    hiddenfield.value=sels[i].options[0].value;

    Any ideas why the select box value is not retained ?

    Just in-case, I removed the javascript, i.e. to return to standard select boxes) and everything works ok.

    Adding an alert to display the hiddenfield.value returns no value.

    Any help would be really appreciated. Thanks

    Comment by Andrew on February 3rd, 2015
  1. This is great, but when i load the page it shows the ugly dropdown for a split second until the css covers it up. Is there anyway to stop that from happening?

    Comment by Omar on February 3rd, 2015
  1. sir,
    can you help how can i change the size of the drop down menu in the list.
    the list we create using the … tag.
    pls sir help me asap.
    thankyou

    Comment by jayendra on February 22nd, 2015
  1. Hi. If you mean the width of the list items, simply add a width to the .dropcontainer ul li class. Hope this helps!

    Comment by Phil on February 22nd, 2015
  1. no sir i want to increase the height of the menu in the list.
    i have created the list with …. tag.
    i want to increase the height of the menu pls help

    Comment by jayendra on March 1st, 2015
  1. Hi. Sorry, but still not entirely sure how I can help. In demo 2, if you want to increase the height of the fixed dropdown simply change the height of the following class:

    Select Code
    .dropdownvisible {
        height: 200px;
        overflow-y: scroll;
        }

    In the 1st demo the height of the dropdown is automatically calculated from the number of list items. I suppose you could add padding to the first and last children if you wanted to increase the overall height?

    Comment by Phil on March 1st, 2015
  1. i have used this code

    volvo
    bmw
    benz
    lamborghini
    .
    i want to increase the height of the opiton tag.
    so how could i do that?
    means the size of the volvo option should be more.

    Comment by jayendra on March 1st, 2015
  1. Is there a way to close the dropdown by clicking elsewhere on the page? Thank you

    Comment by Auey on March 3rd, 2015
  1. I tried to use it with Contact Form 7 but nothing happens…
    This is what i have on the contact form:
    [select* branches id:branches class:turnintodropdown “Branche 1” “Branche 2” “etc.”]
    The css and js are properly loaded but nothing changes… am i missing something?

    Comment by Robin Koorn on March 11th, 2015
  1. Hello and thanks for sharing.

    How proceed to include a link url to each option value ?
    I tried one solution submitted , but it doesn’t work.. :(

    Thanks for help,
    Cédric

    Comment by Cédric on April 1st, 2015
  1. So many noobs in the comments, if you can’t get it to post or work in ie9 then it’s your own problem, maybe if you weren’t just tutorial taught scrub lord then these things might work for you. ps. this works flawless for all browsers ie9+, and I can post to php and ruby perfectly.

    Comment by WhoAmI on April 14th, 2015
  1. PHIL, many thanks for a very helpful tutorial. And Congratulations to those who made it work perfectly first time.

    For the rest of us, who like me put blood, sweat and tears into our modest web pages, I discovered a way to get this dropdown list to go straight to a URL on clicking an option – no button needed.
    1. In the HTML file add your URL ‘value’ to each item in the list:
    item 1
    2. In the select.js file, after line 53 this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
    add the line
    window.location=this.elm.value;

    It may not be rocket science, but this seems to work for me (after several hours of experimenting) – I hope it’s useful. If there’s a more robust (i.e. browser/OS-agnostic) way, please share.

    Comment by Foodie2 on April 14th, 2015
  1. Many thanks for this Foodie2!

    Comment by Phil on April 15th, 2015
  1. EDIT: For step 1 above, in place of “item 1″ please read
    (option value=”URL-1.html”)item 1(/option)

    Comment by Foodie2 on April 14th, 2015
  1. Enjoying the dropdown.
    I (and others) have looked for a way to show the first ‘option’ again when the browser back button is hit, after navigating away.
    The page reloads from cache, but ‘no-cache’ and ‘no-store’ don’t fix it. I can’t make ‘location.reload(true)’ in the Javascript work either. I suspect there is a way to reset the list from within the JS code, as soon as the page is displayed: anyone found it, please?

    Comment by Foodie2 on April 16th, 2015
  1. i found derty solution for auto jump link, on change option jump to value
    change arround 46 into this
    newa.href=newli.v;
    and change arround 52
    this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;

    return false;
    into this
    this.istrigger.firstChild.nodeValue=this.firstChild.firstChild.nodeValue;
    window.location.href = this.v;
    return false;

    Comment by cangak on April 23rd, 2015
  1. That’s great Cangak; thanks.

    Comment by Phil on April 23rd, 2015
  1. Hello,

    Looks great, but I’m having a few problems implementing it on a search form. In particular, I can’t figure out where to put the ‘turnintodropdown’

    The search form is created via shortcode and plugin (Search and Filter).

    Would really appreciate some help.

    Here’s link to text page http://gotimetrekkers.com/walking-test/

    Cheers
    Patrick

    Comment by Patrick on April 23rd, 2015
  1. Have you checked whether the variations prices update and whether the clear selection still works when the plugin is active. I’m having conflict issues on one of my sites with plugins that style dropdowns in woocommerce.

    Comment by Marcus on May 12th, 2015
  1. Hi,

    Nice script :).

    I had a problem to show default selected option and I found a solution for this.

    find the string ” options[0]” ( line 28 and 41) and replace with ” options[sels[i].selectedIndex]” , this will show default selected option when the script load.

    And also add an empty option as first option, because the script select first option as selected option by defult.

    Thanks for this script :)

    Comment by Linesh Jose on June 11th, 2015
  1. Hi there,

    Whats the best way to stop the content from pushing down underneath? I know someone asked above but noody replied.
    Im trying to keep this all responsive and not keen on putting widths on and position absolutes?

    Thanks in advance :)

    Comment by Lea on July 7th, 2015
  1. Hey there,

    g8 script! It rocks!

    I’m not a JavaScript pro so I don’t understand the code completly. I want to modify it, that the div “dropcontainer” appears IN the ”activetrigger” link. What do I have to change to getting it work?

    Thanks a lot and greets from germany!

    Comment by Florian on July 10th, 2015
  1. Super elegant styling! Thanks for sharing.

    I’m wondering if I’d need to modify any of your code to get it to work on for a dropdown list that has a couple of subcategory levels. Currently, the subcategories are indented over from the parent categories.

    Comment by Alex on September 11th, 2015
  1. Hi,

    Great script. I tried to apply the css to a form which also has a search box, but lost formatting once I added the search box. This is the code:

    Select Code
    <form action="http://www.translatum.gr" method="get" target="_blank">
    <input type="text" name="word" />
    <select name="group" />
    <option value="English-Greek">English-Greek</option>
    <option value="German-Greek">German-Greek</option></select>
    <input type="submit" value="Translate" />
    </form>
    Comment by translator on October 15th, 2015
  1. To make the menu go over the content (rather than push it down), I had success using the following css…

    .dropcontainer {
    position: absolute;
    width: 100%;
    padding-right: 30px;
    }

    Comment by Patrick on November 12th, 2015
  1. Hello. I try to implement this into osclass https://demo.osclass.org/general/index.php?page=item&action=item_add and i have run into a problem. If you click on Select category and make a selection, a second select will appear, Select subcategory, so we have a cascaded select. The problem is that with your code, i have the first select showing ok but on selection, the second select will not appear anymore. Any way to solve this? Thanks

    Comment by Adi on November 19th, 2015
  1. I can’t understand – you are tolking here about select element, but on the example page i found styling ul element. Why?

    Comment by Andrey on December 25th, 2015
  1. Hi there,

    I really like your dropdown. I’m wondering if you know if there is a way to incorporate this drop down in a Gravity Form?

    Comment by Erin on January 8th, 2016
  1. Hi Phil,

    Great little script.

    It seems though when i select the variations (anything but quantity) the price for variation is not updated.

    Price is updated when the quantity is selected, but any other variations and it does not update.

    When i hit add to cart it adds the item with first, default price and then switches the price on reload of the page. But the item with the wrong price for variation is added.

    Any change you can advice?

    Many thanks,
    Dimitry

    Comment by Dimitry on January 27th, 2016
  1. Hi Dimitry. I presume your asking about a Woocommerce issue? Sorry, but I’m not really able to help as I’m not massively familiar with that plugin and I’ve only ever used the script to style the shipping dropdown. I’m not sure why the styling select script would affect anything in the Woocommerce backend.

    Comment by Phil on January 28th, 2016
  1. the code works perfectly but when I remove the comment (which is a html comment in a css file- ) then the code doesn’t work correctly anymore. instead of opening underneath, the dropdown menu will open BESIDE the select menu. However with the comment in, it functions properly with it opening underneath. any ideas why?

    Comment by sharon on February 12th, 2016
  1. To make the select to close when you click OUTSIDE the select, I found this workaround:

    1) put the select code inside a div (I called it “select_wrapper”)

    2) edit select.js and include this code after line 66 (count++;) :

    $(document).mouseup(function (e)
    {
    var container = $(“#select_wrapper”);

    if (!container.is(e.target) // if the target of the click isn’t the container…
    && container.has(e.target).length === 0) // … nor a descendant of the container
    {
    ts_swapclass(replaceUL,ts_dropdownopen,ts_dropdownclosed);
    }
    });

    so if the click is outside the div “select_wrapper”, it closes the select menu. This way is suitable with 1 select only per page, but it is what I needed. Maybe somebody else will find it useful too.

    Comment by Melony on February 14th, 2016
  1. Sorry, this is an errata corrige of my previous post. The code I wrote is incomplete, as the click outside of the div will also open the select if it was closed.

    This is the correct code that will open the select if it closed and do nothing if it is already closed:

    $(document).mouseup(function (e)
    {
    var container = $(“#select_wrapper”);

    if (!container.is(e.target) // if the target of the click isn’t the container…
    && container.has(e.target).length === 0) // … nor a descendant of the container
    {
    if (ts_check(replaceUL,ts_dropdownopen))
    {
    ts_swapclass(replaceUL,ts_dropdownopen,ts_dropdownclosed);
    }
    }
    });

    Comment by Melony on February 14th, 2016
  1. Great work Melony. Many thanks for sharing.

    Comment by Phil on February 15th, 2016
  1. Great helpThis has been a great help for me. Thanks so much. I wanted to throw this out there.. to restyle my option items rather than editing core files I added this to my page:

    jQuery(document).ready(function($){
    $(“select”).click(function(){
    $(“option”).addClass(“turnintodropdown”);
    });
    });

    Thought it might help someone else out.

    One issue I have run into is that when I use this on a select menu that is used for sorting rather than links it jumps to another page.. any advice on how to avoid/change this?

    Comment by Chris on February 16th, 2016
  1. Thanks Chris!

    Comment by Phil on February 23rd, 2016
  1. Hi! Guys, how to change a value of this customized select from another functon?

    Comment by Nikolay on May 28th, 2016
  1. Melony, I can’t seem to get your code for the close when you click outside of the select working. Can you post your code please?

    Comment by Greg on June 10th, 2016
  1. Thanks for posting this. I’m guessing I won’t get any help on this but I figured I’d ask.

    I’m using this for a category widget on a wordpress site. But when you select a category nothing happens.

    I see quite a few people asking how you would make those options clickable links. In this case how you would make those category links actually link to their respective pages?

    Comment by Greg on June 13th, 2016
  1. I have a selectbox on which i use required class. Now when i apply “turnintodropdown” class also on this select box, then the validation part does not works. What is its solution?

    Comment by Amishi on September 3rd, 2016
  1. Also there are certain events that occur on the basis of option selected. How do we manage them if we use this?

    Comment by Amishi on September 3rd, 2016
  1. Hi, sorry if this bug has already been resolved, I found that when the script replaces a select that already has a selected option it resets it to option[0]

    workaround I found is this

    replace
    hiddenfield.value=sels[i].options[0].value;

    with
    var selectedOptionIndex = 0;
    for (var j = 0; j < sels[i].length; j++) {
    if (sels[i].options[j].selected){
    selectedOptionIndex = j;
    break;
    }
    }
    selectedOptionIndex = "" != sels[i].options[selectedOptionIndex].text ? selectedOptionIndex : 0;
    hiddenfield.value=sels[i].options[selectedOptionIndex].value;

    and then replace
    trigger.appendChild(document.createTextNode(sels[i].options[0].text));

    with
    trigger.appendChild(document.createTextNode(sels[i].options[selectedOptionIndex].text));

    it's not extremely stylish but it worked for me, hope it helps someone

    Comment by Maurizio on October 10th, 2016
  1. Thanks Maurizio; I’m sure this will help someone out a great deal. Great work!

    Comment by Phil on October 10th, 2016
  1. Hello,
    In regards to the same bug with resetting the default selected option, I found a simpler, cleaner solution:

    replace this line:
    hiddenfield.value=sels[i].options[0].value;

    with this:
    hiddenfield.value=sels[i].options[sels[i].selectedIndex].value;

    And then further down, replace this line:
    trigger.appendChild(document.createTextNode(sels[i].options[0].text));

    with this:
    trigger.appendChild(document.createTextNode(sels[i].options[sels[i].selectedIndex].text));

    And that’s it! Hope it helps 😉

    Comment by Vasko on November 9th, 2016
  1. hello my friend , very nice code , congratulation .
    I am trying to use this code in vue . But I didnt get it .
    Have you tried to use with Vue Js ? It has a loop in the select box that we do in vue ( v-for() ) , and it loops after the javascript changes . maybe becose that it is no working .

    Do you know some way to make this function works after the Vue loop , maybe is that what I need to make it works .

    Thanks

    Comment by dropdown + Vue on February 20th, 2017
  1. I’ve formatted all the text areas for my Contact 7 Form in my custom CSS (Avada Theme) but I can’t get the [select your-recipient] field to format. Here’s the code I have in the CSS. What should the label for the dropdown field be (5th field)

    div#wpcf7-f201-p203-o1{

    background-color: #fbefde;

    border: 1px solid #f28f27;

    padding:40px;

    }
    #wpcf7-f3672-o2 input[type=”text”],

    #wpcf7-f3672-o2 input[type=”text”],

    #wpcf7-f3672-o2 input[type=”email”],

    #wpcf7-f3672-o2 input[type=”tel”],

    #wpcf7-f3672-o2 input[type=”select your-recipient”],

    #wpcf7-f3672-o2 textarea {

    height:50px;

    background:#725f4c;

    color:#FFF;

    font-family:lora, “Open Sans”, sans-serif;

    font-style:italic;   

    }

    #wpcf7-f3672-o2 input[type=”submit”],

    #wpcf7-f3672-o2 input[type=”button”] {

    background-color:#725f4c;

    width:50%;

    text-align:center;

    text-transform:uppercase;

    }

    Comment by Patrick Craig on March 22nd, 2017
  1. Hi Patrick. Thanks for the comment. Difficult to be sure without seeing your site, but you should be able to target the select directly:

    #wpcf7-f3672-o2 select {height:50px; …}

    Thanks.

    Comment by Phil on March 24th, 2017
  1. Hi,

    Thanks for the solution, looks very nice, but I have an issue:
    I cannot implement two select boxes: when I try to open the second select box the items from select box 1 opens.
    (I use demo2)
    Could you please help me?

    Thanks

    Comment by Nathalie on June 13th, 2017

Join the conversation…

We value your thoughts and hope you'll share them with the Tribe. We promise that your email will never be published or shared.

[Required fields are marked *]

*
*