Multiple Select Options In One Row

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

Solution 1:

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.

Solution 2:

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:

<formaction="#"><fieldset><legend>Select some stuff</legend><fieldset><ol><li><labelfor="inputs1">label 1</label><inputtype="checkbox"name="inputs[]"id="inputs1" /></li><li><labelfor="inputs2">label 2</label><inputtype="checkbox"name="inputs[]"id="inputs2" /></li><!-- other stuff --><li><labelfor="inputs11">label 11</label><inputtype="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 > olli {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
    width: 6em;
}

JS Fiddle demo.

Solution 3:

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.