CSS for <select> menu works ... sometimes - html

Question

This is bizarre. I have a select menu that I've styled to display a hierarchical list.
I have multiple Firefox profiles setup to simulate multiple sessions. One is my "main" profile with numerous extensions and customizations.
However, this is what my styled menu looks like in my "main" profile while using safe mode:
(EDIT: Firefox's safe mode that disables the extensions and resets the configuration)
This is what it looks like in a clean, de-cached Firefox profile:
For comparison's sake, Chrome and IE make it half-way there:
I've already got -moz-appearance: none and -webkit-appearance:none; for both the <select> and <option> elements. The left offset on the options is achieved using padding-left.
The most perplexing thing is how this works in one Firefox profile (in safe mode) but not a completely clean one.
How do I make this consistently like the first example across all browsers?
Edit: fiddle

Answer 1

It seems to me you have 3 options:
Pure Html:
Add in blank non-breaking spaces before your options in the lower levels and do it that way : not exactly kind to your time, and a bit messy-looking, but would work.
Pure CSS:
Add on an additional class depending on the level ( doesn't seem to work - already tried it )
Jquery/Javascript: Probably the quickest way! If you are willing to use jquery [or you could do it in plain js, but I've done the fiddle using jquery..]:
Add in a hierarchy indicator using additional classes, depending on the level of the hierarchy See fiddle or snippet
$(document).ready(
function() {
$('.l2').each(
function() {
$(this).text('--' + $(this).text());
}
);
$('.l3').each(
function() {
$(this).text('----' + $(this).text());
}
);
}
);
#hierarchy,
#hierarchy>option {
text-align: justify;
text-shadow: 1px 1px grey; /*optional!*/
word-spacing: 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="hierarchy" name="hierarchy">
<option class="l1" selected>Level 1</option>
<option class="l2">First L2 Indent</option>
<option class="l3">First L3 Indent</option>
<option class="l2">Second L2 Indent</option>
<option class="l3">Second L3 Indent</option>
<option class="l3">Third L3 Indent</option>
</select>