web-dev-qa-db-ja.com

<option>要素に複数の行を含めることはできますか？

<option>要素に複数行を含める方法はありますか？

このような：

 -------------------------
| Normal <option> element |
 -------------------------
| <option> element broken |
| onto two lines          |
 -------------------------
| Normal <option> element |
 -------------------------

HTML/CSSのアプローチはありますか、それともJavaScriptを使用する必要がありますか？

javascriptjqueryhtmlcsshtml-select
13
Upvote

これは、<option></option>要素内にHTMLタグを表示する特定のケースです。私の知る限り、この領域ではブラウザの動作が大きく異なり（Firefoxは画像も表示し、他のブラウザはほとんどまたはすべてのタグを無視します）、クロスブラウザソリューションはありません。 JavaScriptと別のマークアップでエミュレートする必要があるでしょう。

http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html で彼らは言う：

許可される内容：通常の文字データ

...これは http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data で定義されています。

いつものように仕様を理解するのは難しいですが、リテラル<（つまり、<br>などのHTMLタグ）を挿入できないことは理解しています。空白で動作を定義する場所が見つかりませんが、ほとんどのブラウザはそれを折りたたんでいるように見えます。

6
Álvaro González

これはあなたが望むものではないかもしれませんが、あなたはcan "optgroup"タグを使用して、オプションごとに2行を取得します。例：

<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>
8
Neil

Selectの問題は、それらがWebフォーム要素ではなくOSフォーム要素であるということです。そのため、他の入力とは異なり、一部のブラウザー（cough ... IE6）ではスタイルを設定できません。この例をどこかで見たことがありますか？オペレーティングシステムはこれに対応していないため、ブラウザも対応しません。

また、あまりユーザーフレンドリーではないことも指摘しておきます。ユーザーは、1行のオプションを含む選択ボックスのアイデアに慣れています。それらを複数の行に配置し始めると、選択ボックスの使いやすさと固有のアクセシビリティの粒度に反することになります。このルートを取るのはあまり良い考えではないかもしれません。

私の意見ですが、それが理にかなっていることを願っています。

4
tadywankenobi

そうではないと思います。ブラウザは、<br>要素内の改行文字とHTML<option>タグを無視しているようであり、JavaScriptがこのテキストの表示方法を操作する方法を提供していないと思います。

4
Paul D. Waite

いいえ、そのようなことのためにカスタムドロップダウンリストを作成する必要があります。

jQueryはこれらをたくさん提供しています。おそらくCSSを使用して、必要なものを実現するための特定のオプションのheightを定義できます。

3
Shadow Wizard is Ear For You