Html Select box options on Hover?

Question

I've seen this very simple selectbox on youtube, where the select options are visible on hover (instead of clicking), as seen in following screenshot.

I'm trying to create similar effect in the following simple select box. Can someone please help how this can be done? Thanks.

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
  </select> 

Answer 1

At work at the moment so can't check youtube but from the styling I am guessing that that "select" control is not an actual select control. Most likely it is implemented like a navigational drop down menu but instead of navigating to a url on click it replaces the contents and value of an input label. Then on form submit it can pick up the value of the label.

Answer 2

It is impossible to open a select box in the plain way your are describing. It is no coincidence that the image you have provided looks nothing like a normal select box. This is because it is probably actually a ul list which is styled to look as it does, revealing itself on hover, which is actually possible.

I created an example over on jsfiddle of how it could be done.

Answer 3

Link to the updated jquery plugin Forked $.selectUI plugin

• Fixes iteration over multiple elements passed in

Answer 4

If you're interested in doing it this way, I've got a simple, non-javascript way of doing it on my current project actually (look at the "I Want To" menu at the top). Like @Marcus said, this is not with a select box, but is done with a unordered list (<ul>).

The html is straightforward:

<div id="iWantToMenuContainer">
<ul id="i-want-to" class="menu">
    <li><a href="http://cumberlandme.info/contact">contact the town office</a></li>
    <li><a href="http://cumberlandme.info/upcoming-events">find out what&#8217;s happening</a></li>
    <li><a href="http://cumberlandme.info/online-services">get permits and services applications</a></li>
</ul>
</div>  

the important part is the css, essentially just the first 2 rules. The div appears to expand because of the overflow:visible on :hover.

#iWantToMenuContainer {
    overflow:hidden;
}
#iWantToMenuContainer:hover {
    overflow:visible
    }
#iWantToMenuContainer ul {
    border:1px solid #b6c2b9;
    background:#fff;
    padding:1px 20px 3px 5px
    }
#iWantToMenuContainer a:link,#iWantToMenuContainer a:visited {
    display:block;
    background: #fff;    
}
#iWantToMenuContainer a:hover {
    background:#e6e6e6
    }

Answer 5

Here's one way of doing it, though I'd prefer a more plug-in approach (rather than hard-coding the html ul):

$('#selectUl li:not(":first")').addClass('unselected');
// Used to hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

JS Fiddle demo.

---

Edited to include an alert demonstrating the changes in the select element's value: JS Fiddle demo.

---

Edited to include the css and html used in the demo:

html

<select name="size">
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select>

<ul id="selectUl">
    <li>small</li>
    <li>medium</li>
    <li>large</li>
</ul>

css:

select {
    opacity: 0.5;
}
ul {
    width: 8em;
    line-height: 2em;
}

li {
    display: list-item;
    width: 100%;
    height: 2em;
    border:1px solid #ccc;
    border-top-width: 0;
    text-indent: 1em;
    background-color: #f90;
}
li:first-child {
    border-top-width: 1px;
}

li.unselected {
    display: none;
    background-color: #fff;
}
ul#selectUl:hover li.unselected {
    background-color: #fff;
}
ul#selectUl:hover li,
ul#selectUl:hover li.unselected {
    display: list-item;
}
ul#selectUl:hover li {
    background-color: #fc0;
}
ul#selectUl li:hover,
ul#selectUl li.unselected:hover {
    background-color: #f90;
}

This causes the menu to hide the unselected items until the ul is hovered over, then revealing all the options, and uses the click() event to assign the unselected class name to the non-clicked elements; which allows the clicked element to be still visible on mouseout.

The above CSS reflects the most-recent edit, to make the currently-selected, and :hover-ed, li more visible.

Latest JS Fiddle demo.

---

Edited because, well, I got a little bored. And had nothing better to do, so I made a simple plug-in:

(function($) {
    $.fn.selectUl = function(){
        var $origSelect = $(this);
        var newId = $(this).attr('name') + '-ul';
        var numOptions = $(this).children().length;

        $('<ul id="' + newId + '" class="plainSelect" />')
            .insertAfter($(this));

        for (var i = 0; i < numOptions; i++) {
            var text = $(this).find('option').eq(i).text();
           $('<li />').text(text).appendTo('#' + newId);
        }

        if ($(this).find('option:selected')) {
            var selected = $(this).find('option:selected').index();
            $('#' + newId)
                .find('li')
                .not(':eq(' + selected + ')')
                .addClass('unselected');
        }

        $('#' + newId + ' li')
            .hover(
                function(){
                    $(this).click(
                        function(){
                            var newSelect = $(this).index();
                            $(this)
                                .parent()
                                .find('.unselected')
                                .removeClass('unselected');
                            $(this)
                                .parent()
                                .find('li')
                                .not(this)
                                .addClass('unselected');
                            $($origSelect)
                                .find('option:selected')
                                .removeAttr('selected');
                            $($origSelect)
                                .find('option:eq(' + newSelect + ')')
                                .attr('selected',true);
                        });
                },
                function(){
            });
                    // assuming that you don't want the 'select' visible:
                    $(this).hide();

        return $(this);
    }
        })(jQuery);


$('#sizes').selectUl();

JS Fiddle demo, including the 'plug-in'.

Notes:

• This isn't absolutely positioned, so if you have more than one select (which you can certainly do, and works okay) it does screw with the page-flow a little (or a lot), but this can be amended in the CSS (I'd imagine, though I've not yet tried).
• It could probably do with some options, possibly allowing dl elements to be used in place of the current ul, which would allow for giving an explanation of the available options.
• I suspect that it could be optimised a great deal more than it currently is, but I'm not, off-hand, sure how. Possibly some sleep and, late, browsing the jQuery API might offer some insights (though if anyone sees anything obvious please leave a comment! Or take the JS Fiddle and, for want of a better term, fork it (though I'd obviously appreciate links to any subsequent forks/updates).
• I'm not entirely sure what licensing options are available to me (since everything on SO is Creative Commons cc-by-sa, according to Jeff Atwood, and the footer of this site, anyway), but for what it's worth I'm quite happy for anyone to take the above and, well, do whatever you like with it (if it's of any use, have fun!).

---

Edited because I felt that there should be a visible 'guidance' element, and also to try and explain something of how it all works.

Given the html:

<select name="sizes" id="sizes" class="makePlain" title="Select a size:">
    <option value="xxs">XX-Small</option>
    <option value="xs">X-Small</option>
    <option value="s">Small</option>
    <option value="m">Medium</option>
    <option value="l">Large</option>
    <option value="xl">X-Large</option>
    <option value="xxl">XX-Large</option>
</select>

Use the jQuery to call the plugin:

$('#sizes').selectUl();

This takes the above select, and creates a ul with the following mark-up:

<ul id="sizes-ul" class="plainSelect">
    <li class="guidance">Select a size:</li>
    <li>XX-Small</li>
    <li class="unselected">X-Small</li>
    <li class="unselected">Small</li>
    <li class="unselected">Medium</li>
    <li class="unselected">Large</li>
    <li class="unselected">X-Large</li>
    <li class="unselected">XX-Large</li>
</ul>

The CSS used (in the demo):

ul.plainSelect {
    /* targets those 'ul' elements created by the plug-in */
    border: 1px solid #000;
}
ul.plainSelect li {
    /* this styles the 'selected' li 'option' element */
    background-color: #f90;
    display: list-item;
}
ul.plainSelect li.guidance {
    /* this is the 'Select a Reason' guidance/explanation from the image in the question */
    border-bottom: 1px solid #000;
    padding: 0.3em;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #fff;
}

ul.plainSelect li.unselected {
    /* hides the 'unselected' options, and removes the background-color for contrast */
    background-color: #fff;
    display: none;
}

ul.plainSelect:hover li,
ul.plainSelect:hover li.unselected {
    /* ensures that the 'li' elements pop-up when the list is hovered over, */
    /* and act/display like 'li' elements */
    display: list-item;
}

JS Fiddle demo.