1

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339

3 Answers3

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.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • I am actually trying to avoid using checkboxes. Those make the validation much harder, as there are like 160 options :) –  Jan 08 '12 at 16:01
  • Unfortunately you're pretty much tied to a similar approach, unless you're prepared to have a *very* long `select` element...have you considered posting a question about your validation problems? – David Thomas Jan 08 '12 at 16:03
  • I would not like to write a new article because of that, but the problem I would have are those checkboxes. I'd have to check how many of them are selected, because there is a limit of max 4 selected items at a time. Next I'd have to populate an array with the data, and then send it to the script for validation via AJAX. Not only that, but I also have more than one select fields, so that's a extremely long code. –  Jan 08 '12 at 16:06
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.

Ansel Santosa
  • 8,224
  • 1
  • 28
  • 39
  • Actually, I use Chrome, and all your options are beneath one another. –  Jan 08 '12 at 16:16
  • It's just an alignment thing, obviously didn't have time to make this pixel perfect cross-browser. Lower the width of `#options li` and they will float. Also edited my solution to include a multiple select version. – Ansel Santosa Jan 08 '12 at 16:18
  • I changed the width, and it now works. Width was too long for 1px :P –  Jan 08 '12 at 16:22
0

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.

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339