Лучший современный способ создания отступов в <select>? - PullRequest
3 голосов
/ 24 января 2012

Если вы нацелены только на Firefox, Opera и Chrome, а не на IE, и нацелены только на современные браузеры (выпущенные в прошлом году), каков наилучший способ создания многоуровневого отступа для параметров ввыбрать без использования optgroups?То есть, когда вы хотите, чтобы родительские параметры все еще были доступны для выбора, а также дочерние элементы?

<select>
    <option>
    <option>
        <option>
        <option>
        <option>
    <option>
        <option>
        <option>
            <option>
            <option>
            <option>
        <option>
        <option>
    <option>
    <option>
</select>

Было бы предпочтительнее, хотя я не знаю, возможно ли это на самом деле, иметь фактического родителя/ дочерние отношения между уровнями параметров, но если это не так, по крайней мере, способ заставить его выглядеть так, как если бы взаимодействие между тремя браузерами было одинаковым?

Ответы [ 2 ]

8 голосов
/ 24 января 2012

Добавьте к вашему тексту <option> соответствующую сумму &nbsp; (код символа 160 соответственно).

3 голосов
/ 24 января 2012

Добавление спецсимволов, безусловно, работает, но это очень быстро.

Другой «семантической» альтернативой будет использование <optgroup>. Очевидным ограничением здесь является то, что вы не можете вкладывать их друг в друга, поэтому вы ограничены простой одноуровневой группировкой.

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

<select>
  <optgroup label="Favorite Food">
    <option value="salad">Salad</option>
    <option value="pizza">Pizza</option>
  </optgroup>
  <optgroup label="Favorite Food &gt; Pizza Type">
    <option value="pepperoni">Pepperoni</option>
    <option value="cheese">Cheese</option>
  </optgroup>
</select>
...