How to indent multiple levels of select optgroup with CSS?
8/29/2016 Edit
The original answer below is no longer functional in modern browsers. For those who still need to use a tag instead of doing magic with HTML lists, a better solution was found on this stackoverflow thread: Rendering a hierarchy of "OPTION"s in a "SELECT" tag
I would recommend the solution suggested by igor-krupitsky who suggests dropping and using the binary instead. At least on Chrome, this does not break using the keyboard to find the first character of an item in the list.
End Edit
The current HTML specification does not provide for nested tags adding any functionality (such as indentation). See this link.
In the mean time, you can manually style your levels with CSS. I tried using styles in your sample, but for some reason they did not render correctly, so at the very least the following will work:
<select name="select_projects" id="select_projects">
<option value="">project.xml</option>
<optgroup label="client1">
<option value="">project2.xml</option>
</optgroup>
<optgroup label="client2">
<option value="">project5.xml</option>
<option value="">project6.xml</option>
<optgroup label="client2_a">
<option value="" style="margin-left:23px;">project7.xml</option>
<option value="" style="margin-left:23px;">project8.xml</option>
</optgroup>
<option value="">project3.xml</option>
<option value="">project4.xml</option>
</optgroup>
<option value="">project0.xml</option>
<option value="">project1.xml</option>
</select>
Best modern way of creating indentation in a select ?
Prefix your <option>
text with an appropriate amount of
(character code 160, respectively).
Nesting optgroups in a dropdownlist/select
Ok, if anyone ever reads this: the best option is to add four
s at each extra level of indentation, it would seem!
so:
<select>
<optgroup label="Level One">
<option> A.1 </option>
<optgroup label=" Level Two">
<option> A.B.1 </option>
</optgroup>
<option> A.2 </option>
</optgroup>
</select>
Rendering a hierarchy of OPTION s in a SELECT tag
deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
It's far from pretty but it might work for you if the optgroup doesn't.
Rendering a hierarchy of OPTION s in a SELECT tag
deceze way is much better and was my first idea. As an alternative if that doesn't work is that you can use non-breaking spaces in the tag value:
<select>
<option>select me</option>
<option> me indented</option>
<option> even more indentation</option>
</select>
It's far from pretty but it might work for you if the optgroup doesn't.
HTML / CSS: Nested options in a select field?
You can use <optgroup>
to create a single level of nesting...
<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>
Laravel Nested Option Groups
That's because you can not make a select element in html with "multiple layers of group options"!
You can have multiple <optgroup>
tags inside a <select>
tag, and inside an <optgroup>
you can have <option>
s. And Laravel is just trying to make HTML.
http://www.w3.org/TR/html401/interact/forms.html#h-17.6
See these answers for some hacky workarounds:
Nesting optgroups in a dropdownlist/select
How to indent multiple levels of select optgroup with CSS?
Selectable optgroup in HTML select tag
I don't think you can but you can easily reproduce the visual style with css and thus only have options in your select, so everything is selectable.
.optionGroup {
font-weight: bold;
font-style: italic;
}
.optionChild {
padding-left: 15px;
}
<select multiple="multiple">
<option value="0" class="optionGroup">Parent Tag</option>
<option value="1" class="optionChild">Child Tag</option>
<option value="2" class="optionChild">Child Tag</option>
</select>
Related Topics
Play Infinitely Looping Video On-Load in HTML5
How to Set the HTML Options for Collection_Select in Rails
What Characters Must Be Escaped in an Http Query String
Flexbox on Ie11: Image Stretched for No Reason
Aligning Elements Left and Center with Flexbox
Placing a <Div> Within a <Canvas>
Half Circle with CSS (Border, Outline Only)
Set Maxlength in HTML Textarea
How to Disable the Spell Checker on Text Inputs on the Iphone
Change the Column Order in a CSS Grid
Change Checkbox Check Image to Custom Image
Changing the Text Selection Color Using CSS
Pure CSS Continuous Horizontal Text Scroll Without Break
HTML Generated Microsoft Word Document with Header, Footer and Watermark