HTML/CSS：<select>のフィールド内にネストされた<options>？

Question

ネストしたulリストを作成するのと同じように、フォームドロップダウンでネストされたオプションフィールドを作成することはできますか？

変更は単なる審美的なものなので、CSSでこれを行うことは可能ですか？

Answer 1

...

<select> 
    <optgroup label="Options 1"> 
    <option>Option 1.1</option> 
    <option>Option 1.2</option> 
    </optgroup> 
    <optgroup label="Options 2"> 
    <option>Option 2.1</option> 
    <option>Option 2.2</option> 
    </optgroup> 
</select> 

例：グループラベルが選択可能なオプションではないことをhttp://jsfiddle.net/JaZAm/1/

注意。その場合、私は彼のコメントにリンクされている質問への上の答えに記載されているテキストインデントソリューションを使用することをお勧めします。

Answer 2

複数の<option>をネストすることはできません。 <option>要素をグループ化する場合は、<optgroup>を使用してください。あなたは、ネストの単一レベルを作成するために<optgroup>を使用することができます

Answer 3

いいえ、実際はありません。セクション間に追加できない選択できないヘッダーであるoptgroupタグがありますが、<select>エレメントではネストできません。

Answer 4

optgroupタグを使用してください。スタイリングのサポートに関しては、いくつかありますが、フォーム要素であるので、あなたがそれをどこまで取ることができるかについてはブラウザーの慈悲にあります。

http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single-optgroup/

あなたが大規模なモデルチェンジが必要な場合は、おそらくネストされたUL構造を使用して、独自のUIウィジェットを構築し、それをJavaScriptでの相互作用を与えることを検討。