Multiple select options in one row

Question

I have a select field, with the multiple tag. Right now, the field has many options, so I don't like the idea that all options are below each other. What I am trying to achieve, is to have more options in each row, to make the select field much smaller, and easier to navigate in. This is what the select field looks like now:

[option]
[option]
[option]
[option]

I would like it to look like this:

[option] [option] [option] [option]

Thanks.

Answer 1

You can't float, or otherwise move, option elements with CSS or, so far as I'm aware, JavaScript. While this is impossible, why not instead use a nested ol (or ul...) to contain the elements that you want to display horizontally? For example:

<form action="#">
    <fieldset>
        <legend>Select some stuff</legend>
        <fieldset>
            <ol>
                <li><label for="inputs1">label 1</label><input type="checkbox" name="inputs[]" id="inputs1" /></li>
            <li><label for="inputs2">label 2</label><input type="checkbox" name="inputs[]" id="inputs2" /></li>

<!-- other stuff -->

                <li><label for="inputs11">label 11</label><input type="checkbox" name="inputs[]" id="inputs11" /></li>
            </ol>
        </fieldset>
    </fieldset>
</form>

With the CSS:

fieldset {
    width: 50%;
    margin: 0 auto 1em auto;
    position: relative;
    border: 1px solid #f90;
}

fieldset > fieldset {
    width: 100%;
    position: absolute;
    left: -1px;
    display: none;
}

fieldset:hover > fieldset,
fieldset > fieldset:hover {
    display: block;
}

fieldset > fieldset > ol li {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
    width: 6em;
}

JS Fiddle demo.

Answer 2

This is not possible using the native select HTML control.

You could instead write some javascript code to create an element, such as a span for each option, and append it to the page. These would then sit horizontally across from each other. You would then hide the original select element, but hook up the events on the appended divs to highlight the relevant option of the select on click.

Answer 3

This is a (relatively) simple solution that emulates a select element. I've written it in jQuery but it could be done in pure JS as well.

In my demo the elements are floated two per row but obviously this could be changed easily.

Here is the Fiddle.

Edit: Missed that it's a multiple select. Here is an updated multiple select version.