Menu
Is there a way to have multiple lines in an <option> element?
Like this:
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
Is there any HTML/CSS approach, or should I use JavaScript?
366
You can't format line breaks into an option; however, you can use the title attibute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the full skinny in the title.
To insert multiple rows, select the same number of rows that you want to insert. To select multiple rows hold down the "shift" key on your keyboard on a Mac or PC. For example, if you want to insert six rows, select six rows while holding the "shift" key.
If you want to select multiple options, you must press Ctrl + click to select more options. If you want to disable multiselect, just erase the "multiple" parameter from the SELECT tag. NOT multi-select, it's multi-line what he is looking for as he stated in his question.
The <select> element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once.
This may not be what you want, but you can get two lines per option, by using the "optgroup" tag e.g:
<select>
<optgroup label="Click below for 'yes'">
<option value="yes">Yes</option>
</optgroup>
<optgroup label="Click below for 'No'">
<option value="no">No</option>
</optgroup>
</select>
It's a particular case of displaying HTML tags inside an <option></option> element. As far as I know, browsers behave very differently in this area (Firefox displays even images, other browsers ignore most or all tags) and there isn't a cross-browser solution. You'll probably need to emulate it with JavaScript and a different markup.
At http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html they say:
Permitted contents: normal character data
... which is defined at http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
The spec is hard to understand, as usual, but I understand that you cannot insert a literal < (i.e., an HTML tag such as <br>). I cannot find where it defines the behaviour with blank space but most browsers appear to collapse it.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
