Как сделать отступ для нескольких уровней выбранной группы с помощью CSS?

Question

Просто пытаясь сделать отступ для блоков optgroup по глубине вложения, я пробовал общее правило margin-left, вложенные элементы затем пытались применить то же правило, пробовал padding-left ... Возможно ли сделать отступ? Вроде элементарно: P

В приведенном ниже примере группа с пометкой 'client2_a' должна иметь больше отступов, чем остальные, потому что она вложена в 'client2'.

http://jsfiddle.net/Tb5Rc/5/

Answer 1

8/29/2016 Редактировать

Исходный ответ ниже больше не работает в современных браузерах. Для тех, кому все еще нужно использовать тег вместо магии со списками HTML, в этом потоке stackoverflow было найдено лучшее решение: Отображение иерархии «OPTION» в теге «SELECT»

Я бы порекомендовал решение, предложенное igor-krupitsky , который предлагает отказаться от & nbsp; и использование двоичного файла вместо этого. По крайней мере, в Chrome это не нарушает использование клавиатуры для поиска первого символа элемента в списке.

Конец редактирования

Текущая спецификация HTML не предусматривает вложенных тегов, добавляющих какие-либо функции (например, отступ). Смотрите эту ссылку .

В то же время вы можете вручную стилизовать свои уровни с помощью CSS. Я пытался использовать стили в вашем примере, но по какой-то причине они не отображались правильно, поэтому по крайней мере будет работать следующее:

<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>

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

Answer 2

Это удивительно просто, чем стиль.Ответ пришел ко мне после нескольких часов борьбы :)).Теги optgroup и option определяют строки в режиме только для чтения.Поэтому для того, чтобы сделать отступ для любого содержимого группы или опции, вы просто используете простой пробел в именах или &nbsp.

Это так просто :)!

Answer 3

Как дополнение к ответу lucian, новые версии Chrome, похоже, не поддерживают встраивание   в текст. Это фактически покажет амперсанд и т. Д. Вместо того, чтобы дать вам неразрывное пространство. Однако я обнаружил, что при использовании версии Unicode неразрывного пробела все равно будет работать нормально.

Я использую Scala, поэтому смог просто добавить "\u00A0" в мой код на стороне сервера. Вы, вероятно, могли бы вставить символ Unicode непосредственно в ваш код, но я бы не рекомендовал его (только потому, что было бы очень трудно сказать, что это не обычный пробел).

Одна приятная вещь - это то, что Chrome, по крайней мере, будет игнорировать пробелы с точки зрения навигации с помощью клавиатуры. Если у меня есть опция с именем Test, ввод t все равно переместит подсветку вправо, независимо от того, сколько пробелов перед ней стоит.

Answer 4

Добавить к CSS это:

option {
text-indent: 10px; 
}

Готово.