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 с спецификацией может быть хорошим выбором.
Вместо того, чтобы ставить метку в 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><optionstyle="background-color:#cccccc;"disabledselected>Select An Option</option><option>First Option</option><option>Second</option><optionstyle="font-size:1pt;background-color:#000000;"disabled> </option><option>Third</option><option>Fourth</option><optionstyle="font-size:1pt;background-color:#000000;"disabled> </option><option>Fifth</option><option>Sixth</option></select>
здорово ! Я использовал min-height: 1px; макс высота: 1px; обивка: 0; вместо размера шрифта: 1pt; за линию 1px
kofifus
15
Если вы не хотите использовать элемент optgroup, вместо этого поместите тире в элемент option и присвойте ему атрибут disabled. Это будет видно, но затенено.
Привет, Джеймс, мне тоже нравится это решение, но программы чтения с экрана будут читать «отключить тире тире тире тире ...», что может очень запутать пользователей с ограниченными возможностями ... у тебя есть идея, как этого избежать? Спасибо!
Хулио
1
Можно ли добавить класс к визуальным элементам, о которых вы не хотите говорить, а затем добавить команду ARIA, которая скрывает / отключает класс? Возможно, что-то вроде одного из методов, используемых здесь? asurkov.blogspot.com/2012/02/…
james.garriss
На самом деле, @Julio, вы должны опубликовать это как новый вопрос. Мне любопытно знать, но я никогда не программировал для экранных ридеров раньше.
james.garriss
9
Вместо обычного гифона я заменил его с помощью символа горизонтальной черты из расширенного набора символов, он будет выглядеть не очень хорошо, если пользователь находится в другой стране, которая заменяет этот символ, но отлично работает для меня. Существует целый ряд различных глав, которые вы можете использовать для получения отличных эффектов, и в этом нет никакого CSS.
Ответ может быть улучшен на примере jsfiddle. Это кажется наиболее встроенным решением, не основанным на побочных эффектах или взломах, но было бы неплохо сравнить визуальные эффекты других ответов.
raider33
Не работает во многих браузерах. (как обычно, входные данные - это боль в заднице)
Сорок
5
Я превращаю комментарий @Laurence Gonsalves в ответ, потому что он единственный, который работает семантически и не выглядит как хак.
Попробуйте добавить это в вашу таблицу стилей:
optgroup + optgroup { border-top:1px solid black }
Это действительно правильный способ сделать это (важно, что он не добавляет бессмысленного контента). Мне нравится optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
стилизовать
3
Другой способ - использовать фоновое изображение css 1x1 для опции, которая работает только с Firefox и имеет запасной вариант «----».
Интервал между символами определяется шрифтом и механизмом рендеринга. Например, я вижу пробелы между черточками в Chrome (Windows), но не в Safari (Mac).
Ответы:
Подход с отключенной опцией, кажется, выглядит лучше и поддерживается лучше всех. Я также включил пример использования optgroup.
optgroup (таким образом, отчасти сосет):
отключена опция (чуть лучше):
И если вы хотите быть по-настоящему модным, используйте горизонтальный юникодный рисованный символ.
(ЛУЧШИЙ ВАРИАНТ!)
http://jsfiddle.net/JFDgH/2/
источник
disabled
опция отображается с отключенной радиокнопкой справа ...Пытаться:
источник
Это старая ветка, но так как никто не опубликовал подобный ответ, я добавлю это, так как это мой предпочтительный способ разделения.
Я нахожу, что использование черточек и тому подобного является своего рода бельмом на глазу, поскольку он может не соответствовать ширине поля выбора. Итак, я предпочитаю использовать CSS для создания моих разделителей .. простая раскраска фона.
источник
Если вы не хотите использовать элемент optgroup, вместо этого поместите тире в элемент option и присвойте ему атрибут disabled. Это будет видно, но затенено.
источник
Вместо обычного гифона я заменил его с помощью символа горизонтальной черты из расширенного набора символов, он будет выглядеть не очень хорошо, если пользователь находится в другой стране, которая заменяет этот символ, но отлично работает для меня. Существует целый ряд различных глав, которые вы можете использовать для получения отличных эффектов, и в этом нет никакого CSS.
источник
Определите класс в CSS:
Написать в HTML:
источник
Я превращаю комментарий @Laurence Gonsalves в ответ, потому что он единственный, который работает семантически и не выглядит как хак.
Попробуйте добавить это в вашу таблицу стилей:
Гораздо менее наглядно, чем кучка черточек.
источник
optgroup { padding-bottom: 8px; } optgroup:not(:first-child) { padding-top: 8px; border-top: solid 1px #666; }
Другой способ - использовать фоновое изображение css 1x1 для опции, которая работает только с Firefox и имеет запасной вариант «----».
http://jsfiddle.net/yNecQ/6/
или использовать JavaScript (jquery) для:
http://tutorialzine.com/2010/11/better-select-jquery-css3/
см. также Как добавить горизонтальную линию в элемент управления выбора HTML?
источник
Если это только WebKit, вы можете использовать
<hr>
для создания реального разделителя.http://code.google.com/p/chromium/issues/detail?id=99534
источник
Вы можете использовать их тире "-". У него нет видимых пробелов между каждым символом.
(В некоторых шрифтах!)
В HTML:
Или в XHTML:
источник
Этот всегда лучший.
источник
Вы можете сделать это тоже. это легко и сделать разделитель выбрать выпадающий список.
источник
Я выбрал условно чередовать цвет и фон. Установив порядок сортировки и с помощью vue.js я сделал что-то вроде этого:
источник