Деревоподобный выбор в HTML

Я пытаюсь создать древовидный <select> с помощью HTML и CSS.

Чтобы поддерживать доступность, я хотел бы избежать javascript, если это возможно. Я также хотел бы избежать использования   вместо заполнения, так как это предотвращает нажатие буквенных клавиш для перехода к элементам.

Что я до сих пор знаю:

<select>
    <optgroup label="fluffy" style="padding-left: 10px;"></optgroup>
        <optgroup label="kitties" style="padding-left: 20px;"></optgroup>
            <option value="1" style="padding-left: 30px;">Fluffykins</option>
            <option value="2" style="padding-left: 30px;">Mr Pooky</option>
        <optgroup label="puppies" style="padding-left: 20px;"></optgroup>
            <option value="3" style="padding-left: 30px;">Doggins</option>

    <optgroup label="not fluffy" style="padding-left: 10px;"></optgroup>
        <optgroup label="snakes" style="padding-left: 20px;"></optgroup>
            <option value="4" style="padding-left: 30px;">Fingers</option>
        <optgroup label="crabs" style="padding-left: 20px;"></optgroup>
            <option value="5" style="padding-left: 30px;">Lucky (AKA Citizen Snips)</option>
</select>

Это отлично работает в Firefox, но IE игнорирует дополнение, предоставляя его как плоский список (довольно сложно использовать), и Chrome не отображает <optgroup> s, которые технически недействительны, поскольку <optgroup> должен содержать по крайней мере на <option>.

К сожалению, <optgroup> не может быть вложен.

Вот как Firefox делает это

Ответ 1

С помощью элемента SELECT он не будет работать. Вы можете создать пользовательский SELECT, основанный на этом:

CSS

    * {
        margin: 0;
        padding: 0;
    }

    .select, .select-tree {
        border: 1px solid black;
        width: 200px;
        overflow: hidden;
        list-style-type: none;
        margin: 10px;
    }

    .select .group-label {
        background-color: white;
    }

    .select .option-label {
        background-color: white;
        display: block;
    }

    .select .hidden-checkbox {
        display: none;
    }

    .select .hidden-checkbox:checked + .option-label,
    .select-tree .hidden-checkbox:checked ~ .group-children,
    .select-tree .hidden-checkbox:checked ~ .group-children * {
        background-color: lightblue;
    }

    .select-tree .group-children {
        list-style-type: none;
        padding-left: 20px;
    }
    .select-tree .option-label {
        padding-left: 5px;
    }

    .select-list .level-0 {
        padding-left: 10px;
    }

    .select-list .level-1 {
        padding-left: 20px;
    }

    .select-list .level-2 {
        padding-left: 30px;
    }

HTML:

выберите многие из списка (группы не выбираются):

<ol class="select select-list select-many">
    <li>
        <input name="list1[1]" type="checkbox" id="check1" class="hidden-checkbox"/>
        <label for="check1" class="option-label level-0">option 1</label>
    </li>
    <li>
        <span class="group-label level-0">group 1</span>
    </li>
    <li>
        <input name="list1[2]" type="checkbox" id="check2" class="hidden-checkbox"/>
        <label for="check2" class="option-label level-1">option 2</label>
    </li>
    <li>
        <span class="group-label level-1">group 2</span>
    </li>
    <li>
        <input name="list1[3]" type="checkbox" id="check3" class="hidden-checkbox"/>
        <label for="check3" class="option-label level-2">option 3</label>
    </li>
    <li>
        <input name="list1[4]" type="checkbox" id="check4" class="hidden-checkbox"/>
        <label for="check4" class="option-label level-2">option 4</label>
    </li>
    <li>
        <input name="list1[5]" type="checkbox" id="check5" class="hidden-checkbox"/>
        <label for="check5" class="option-label level-0">option 5</label>
    </li>
</ol>

выберите один из списка (группы не выбираются):

<ol class="select select-list select-one">
    <li>
        <input name="list2" type="radio" id="check6" class="hidden-checkbox"/>
        <label for="check6" class="option-label level-0">option 1</label>
    </li>
    <li>
        <span class="group-label level-0">group 1</span>
    </li>
    <li>
        <input name="list2" type="radio" id="check7" class="hidden-checkbox"/>
        <label for="check7" class="option-label level-1">option 2</label>
    </li>
    <li>
        <span class="group-label level-1">group 2</span>
    </li>
    <li>
        <input name="list2" type="radio" id="check8" class="hidden-checkbox"/>
        <label for="check8" class="option-label level-2">option 3</label>
    </li>
    <li>
        <input name="list2" type="radio" id="check9" class="hidden-checkbox"/>
        <label for="check9" class="option-label level-2">option 4</label>
    </li>
    <li>
        <input name="list2" type="radio" id="check10" class="hidden-checkbox"/>
        <label for="check10" class="option-label level-0">option 5</label>
    </li>
</ol>

выберите один из дерева (выбираемые группы):

<ol class="select select-tree select-one">
    <li>
        <input name="tree1" type="radio" id="check11" class="hidden-checkbox"/>
        <label for="check11" class="option-label">option 1</label>
    </li>
    <li>
        <input name="tree1" type="radio" id="check12" class="hidden-checkbox"/>
        <label for="check12" class="option-label group-label">group 1</label>
        <ol class="group-children">
            <li>
                <input name="tree1" type="radio" id="check13" class="hidden-checkbox"/>
                <label for="check13" class="option-label">option 2</label>
            </li>
            <li>
                <input name="tree1" type="radio" id="check14" class="hidden-checkbox"/>
                <label for="check14" class="option-label group-label">group 2</label>
                <ol class="group-children">
                    <li>
                        <input name="tree1" type="radio" id="check15" class="hidden-checkbox"/>
                        <label for="check15" class="option-label">option 3</label>
                    </li>
                    <li>
                        <input name="tree1" type="radio" id="check16" class="hidden-checkbox"/>
                        <label for="check16" class="option-label">option 4</label>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        <input name="tree1" type="radio" id="check17" class="hidden-checkbox"/>
        <label for="check17" class="option-label">option 5</label>
    </li>
</ol>

Только IE9 + (и вы должны указать doctype для msie)... Я думаю, вы не можете сделать это без классов "level-x" css, потому что вложенные divs добавление также компенсировало бы цветной фон метки...

В IE8 - вам нужно использовать javascript для раскрашивания меток...

Ответ 2

Как вы уже отметили, вы не можете вложить один OPTGROUP в другой. Но вы должны их приложить. Это достигнет, по крайней мере, базового уровня отступов, который вы еще не видите.

<optgroup label="fluffy" style="padding-left: 10px;">
  <optgroup label="&nbsp;&nbsp;&nbsp;kitties" style="padding-left: 20px;">
     <option value="1" style="padding-left: 30px;">Fluffykins</option>
     <option value="2" style="padding-left: 30px;">Mr Pooky</option>
  </optgroup>
  <optgroup label="&nbsp;&nbsp;&nbsp;puppies" style="padding-left: 20px;">
     <option value="3" style="padding-left: 30px;">Doggins</option>
  </optgroup>
</optgroup>

Так как вы не можете переходить в заголовки OPTGROUP с клавиатуры в любом случае (и только до фактического OPTION), там нет проблем с заполнением label out с помощью   для работы в разных браузерах при заполнении.

Ответ 3

Я предполагаю, что margin-left не делает то, что вы хотите?

Ответ 4

Вы должны обернуть опции-теги с помощью optgroup-Tags.

Он должен выглядеть так:

        <optgroup label="kitties" style="padding-left: 20px;">
            <option value="1" style="padding-left: 30px;">Fluffykins</option>
            <option value="2" style="padding-left: 30px;">Mr Pooky</option>
        </optgroup>
        <optgroup label="puppies" style="padding-left: 20px;">
            <option value="3" style="padding-left: 30px;">Doggins</option>
        </optgroup>

Надеюсь, это поможет:)

Ответ 5

Это не очень хорошее решение, но вы пытались намереваться использовать элементы с неразрывными пробелами (& nbsp;)?