html выберите опцию разделитель

209

Как сделать разделитель в теге select?

New Window
New Tab
-----------
Save Page
------------
Exit
Филипп Сенн
источник
Я обычно добавляю отключенную опцию с пробелами в качестве метки.
Абхи Бекерт

Ответы:

332

Подход с отключенной опцией, кажется, выглядит лучше и поддерживается лучше всех. Я также включил пример использования optgroup.

optgroup (таким образом, отчасти сосет):

<select>
    <optgroup>
        <option>First</option>
    </optgroup>
    <optgroup label="_________">
        <option>Second</option>
        <option>Third</option>
    </optgroup>
</select>

отключена опция (чуть лучше):

<select>
    <option>First</option>
    <option disabled>_________</option>
    <option>Second</option>
    <option>Third</option>
</select>

И если вы хотите быть по-настоящему модным, используйте горизонтальный юникодный рисованный символ.
(ЛУЧШИЙ ВАРИАНТ!)

<select>
    <option>First</option>
    <option disabled>──────────</option>
    <option>Second</option>
    <option>Third</option>
</select>

http://jsfiddle.net/JFDgH/2/

Алекс К
источник
21
Unicode отлично работал для меня в jsfiddle, но когда я попытался скопировать / вставить его в свой код, он не смог правильно перевести. Таким образом, для тех, у кого есть такая проблема, кодировка HTML для горизонтального символа рисования юникодного поля - & # 9472; fileformat.info/info/unicode/char/2500/index.htm, а также есть более тяжелая опция в & # 9473; fileformat.info/info/unicode/char/2501/index.htm
Джефф
1
в Mobile Firefox (и, возможно, в других мобильных браузерах) эта disabledопция отображается с отключенной радиокнопкой справа ...
GoTo
но optgroups отображаются по-разному на ПК и мобильных устройствах, так что отключенный вариант остается лучшим решением.
Перейти к
1
Кодировка html-файла также важна для того, чтобы символы «─» отображались в виде строки, а не тарабарщины. UFT8 с спецификацией может быть хорошим выбором.
Андреас Янссон
1
@ db0 Внешний вид противоречив. grab.by/EzEi vs grab.by/EzEk (см. ссылку jsfiddle).
Алекс К
76

Пытаться:

<optgroup label="----------"></optgroup>
Тина Оруджи
источник
41
Вместо того, чтобы ставить метку в optgroups, попробуйте добавить это в свою таблицу стилей: optgroup + optgroup {border-top: 1px solid black} Гораздо менее дерзкий вид, чем куча штрихов.
Лоуренс Гонсалвес
2
Метки Optgroup должны описывать группу. Если браузер реализован в соответствии со скриншотом в спецификации HTML 4.01, тогда пользователь столкнется с рядами тире и должен будет изучить каждый из них, чтобы выяснить, что стоит за ним.
Квентин
2
@Laurence: IE7 не поддерживает стили CSS для элементов optgroup или option. По крайней мере , не граничит
Grom
2
<optgroup style = "border-top: 1px dotted #ccc; margin: 5px 0;"> </ optgroup> - выглядит круто, по крайней мере, в Firefox!
Бен Синклер
1
Пустая optgroup, как это, не является легальным html. Вы получите ошибки проверки, если будете его использовать. Я предпочитаю ответ james.garriss.
Ариэль
22

Это старая ветка, но так как никто не опубликовал подобный ответ, я добавлю это, так как это мой предпочтительный способ разделения.

Я нахожу, что использование черточек и тому подобного является своего рода бельмом на глазу, поскольку он может не соответствовать ширине поля выбора. Итак, я предпочитаю использовать CSS для создания моих разделителей .. простая раскраска фона.

<select>
  <option style="background-color: #cccccc;" disabled selected>Select An Option</option>
  <option>First Option</option>
  <option>Second</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Third</option>
  <option>Fourth</option>
  <option style="font-size: 1pt; background-color: #000000;" disabled>&nbsp;</option>
  <option>Fifth</option>
  <option>Sixth</option>
</select>

Декстер Блейк
источник
здорово ! Я использовал min-height: 1px; макс высота: 1px; обивка: 0; вместо размера шрифта: 1pt; за линию 1px
kofifus
15

Если вы не хотите использовать элемент optgroup, вместо этого поместите тире в элемент option и присвойте ему атрибут disabled. Это будет видно, но затенено.

<option disabled>----------</option>
james.garriss
источник
Привет, Джеймс, мне тоже нравится это решение, но программы чтения с экрана будут читать «отключить тире тире тире тире ...», что может очень запутать пользователей с ограниченными возможностями ... у тебя есть идея, как этого избежать? Спасибо!
Хулио
1
Можно ли добавить класс к визуальным элементам, о которых вы не хотите говорить, а затем добавить команду ARIA, которая скрывает / отключает класс? Возможно, что-то вроде одного из методов, используемых здесь? asurkov.blogspot.com/2012/02/…
james.garriss
На самом деле, @Julio, вы должны опубликовать это как новый вопрос. Мне любопытно знать, но я никогда не программировал для экранных ридеров раньше.
james.garriss
9

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

<option value='-' disabled>――――</option>
user511941
источник
9

Определите класс в CSS:

option.separator {
    margin-top:8px;
    border-top:1px solid #666;
    padding:0;
}

Написать в HTML:

<select ...>
    <option disabled class="separator"></option>
</select>
Клаус Хейн
источник
2
Ответ может быть улучшен на примере jsfiddle. Это кажется наиболее встроенным решением, не основанным на побочных эффектах или взломах, но было бы неплохо сравнить визуальные эффекты других ответов.
raider33
Не работает во многих браузерах. (как обычно, входные данные - это боль в заднице)
Сорок
5

Я превращаю комментарий @Laurence Gonsalves в ответ, потому что он единственный, который работает семантически и не выглядит как хак.

Попробуйте добавить это в вашу таблицу стилей:

optgroup + optgroup { border-top: 1px solid black } 

Гораздо менее наглядно, чем кучка черточек.

Ноумен
источник
2
Это действительно правильный способ сделать это (важно, что он не добавляет бессмысленного контента). Мне нравится optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
стилизовать
3

Другой способ - использовать фоновое изображение css 1x1 для опции, которая работает только с Firefox и имеет запасной вариант «----».

<option value="" disabled="disabled" class="SelectSeparator">----</option> 

.SelectSeparator
    {
      background-image:  url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
      color:black;
      background-repeat:repeat-x;
      background-position:50% 50%;
      background-attachment:scroll;
}

http://jsfiddle.net/yNecQ/6/

или использовать JavaScript (jquery) для:

-hide the select element and 
-show a div which can be completely styled and 
-reflect the div state onto the select for the form submit

http://tutorialzine.com/2010/11/better-select-jquery-css3/


см. также Как добавить горизонтальную линию в элемент управления выбора HTML?

ebricca
источник
1

Вы можете использовать их тире "-". У него нет видимых пробелов между каждым символом.
некоторых шрифтах!)

В HTML:

<option value = "—————————————« отключен »- ——————————— </ option>

Или в XHTML:

<option value = "—————————————« disabled = »disabled»> ————————————— </ option>
Tobi
источник
1
Интервал между символами определяется шрифтом и механизмом рендеринга. Например, я вижу пробелы между черточками в Chrome (Windows), но не в Safari (Mac).
Хэнк
1

Этот всегда лучший.

<option>First</option>
<option disabled>_________</option>
<option>Second</option>
<option>Third</option>

тежашри
источник
1
 <option  data-divider="true" disabled>______________</option>

Вы можете сделать это тоже. это легко и сделать разделитель выбрать выпадающий список.

DSK
источник
0

Я выбрал условно чередовать цвет и фон. Установив порядок сортировки и с помощью vue.js я сделал что-то вроде этого:

<style>
    .altgroup_1 {background:gray; color:white;}
    .altgroup_2{background:white; color:black;}
</style>

<option :class = {
    'altgroup_1': (country.sort_order > 25),
    'altgroup_2': (country.sort_order > 50 }"
    value="{{ country.iso_short }}">
    {{ country.short_name }}
</option
STWilson
источник