Edited to make it non-duplicate:
Is there a non-js solution that allows keyboard jumps
and a tree structure display for the select / option element?
Simple & \ nbsp; work in both Firefox (23) and Chrome (28), is there a better solution?
I am trying to create a tree selection window in css. From what I was able to find , the :before tag :before supported in IE8 + along with the content property. With that said, I can get code pending rendering in Firefox (23.0), but I can’t render it in IE (10) or Chrome (28).
HTML
<select> <option class="level0">All</option> <option class="level1">Domestic</option> <option class="level2">Alabama</option> <option class="level1">Foreign</option> <option class="level2">Argentina</option> </select>
CSS
.level0:before { content:none; } .level1:before { content:"-"; } .level2:before { content:"--"; }
Jsfiddle enabled
The reason I want to do this via css is because the client wants to restrict javascript on the page, and I would like to go to the option using the keyboard.
Any help to get her to work or to understand why she is not working will be appreciated.
* Edit: * After reading the answers in the comments (which were as good as the answers explaining why this is not possible ). I decided to use the characters in pure html to get the desired effect. This allows you to switch to the keyboard in both Firefox and Chrome (although I still haven't found a solution other than JS to make it work in all 3). So - since there are no answers yet - this is my new question: Is there a non-js solution that allows keyboard transitions and a tree structure for the select / option element?
source share