17

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
DarkLeafyGreen
  • 69,338
  • 131
  • 383
  • 601
  • what is mean by multiple lines in an option element? – Vivek Jan 20 '11 at 12:02
  • normally you have a one line in an option element that you select, I want to have two lines in that element, so e.g. each option has 2 lines – DarkLeafyGreen Jan 20 '11 at 12:03
  • possible duplicate of [multi-line options in htm select](http://stackoverflow.com/questions/1165358/multi-line-options-in-htm-select) – Mark Rogers Nov 19 '14 at 19:06
  • Possible duplicate of [Word wrap options in a select list](https://stackoverflow.com/questions/3587942/word-wrap-options-in-a-select-list) – DavidRR Jul 02 '18 at 20:26
  • Does this answer your question? [Line Break in HTML Select Option?](https://stackoverflow.com/questions/2864238/line-break-in-html-select-option) – Heretic Monkey Nov 29 '21 at 22:52

5 Answers5

7

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>
user229044
  • 232,980
  • 40
  • 330
  • 338
Neil
  • 3,229
  • 1
  • 17
  • 15
  • 1
    This will not allow ONE option to be separated on TWO lines – Ben Sewards Sep 13 '12 at 21:14
  • HotKey, strictly speaking you are right. What I suggested gives the effect of splitting an option over two lines (see http://jsfiddle.net/elusien/Sqc6Z/). Whichever option the user chooses, only the second line is returned. In my defense I did say that this may not be what is wanted. – Neil Sep 14 '12 at 11:18
  • Actually, you're idea of splitting the option and deferring a group doesn't seem like a bad idea at all. But saying so, how would it work with a data source? – Ben Sewards Sep 15 '12 at 23:30
  • Absolutely brilliant! – iconoclast Apr 17 '14 at 00:39
6

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.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
Álvaro González
  • 142,137
  • 41
  • 261
  • 360
4

The problem with select's is that they are OS form elements as opposed to web form elements. That's why it's not possible to style them in some browsers (cough... IE6) unlike other inputs. Have you seen an example of this anywhere? As the operating system doesn't accommodate this, the browser won't either.

I'd also point out that it's not very user friendly. Users are used to the idea of a select box containing options on single lines. If you start to put them on multiple lines, you are going against the grain of the select box's usability and inherent accessibility. It might not be such a good idea to take this route.

Just my opinion, but hope it makes sense.

tadywankenobi
  • 745
  • 1
  • 10
  • 28
  • As this answer is nearly 3.5 yrs old, I'd add now, that there are numerous JS libraries to restyle the select box. Some of these, due to their very nature, will force select options onto two lines. If this is still a concern for people out there, then this might be an option. Just be aware that a lot of the styling libs aren't supported on iOS or Android. – tadywankenobi Apr 17 '14 at 14:37
4

I’m afraid not. Browsers seem to ignore newline characters and HTML <br> tags inside <option> elements, and I don’t think JavaScript provides any way to manipulate how this text appears.

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
3

No, you'll have to build custom drop down list for such a thing.

jQuery offers lots of these; you can probably use CSS to define height for specific options to achieve what you need.

Matt
  • 74,352
  • 26
  • 153
  • 180
Shadow The GPT Wizard
  • 66,030
  • 26
  • 140
  • 208