Как добавить горизонтальную линию (тег <hr>) в раскрывающемся меню или в элементе управления select в HTML?
Как добавить горизонтальную линию в элемент управления html select?
Ответ 1
Вообще говоря, это не особенность <select>, большинство браузеров имеют очень плохое управление стилем для этого элемента управления. В Firefox вы можете сделать следующее (хотя не работает в других браузерах):
<select name="test">
<option val="a">A</option>
<option val="b" class="select-hr">B</option>
<option val="c">C</option>
<option val="d">D</option>
</select>
с CSS:
option.select-hr { border-bottom: 1px dotted #000; }
Но, вообще говоря, единственный способ - включить опцию с тире и попытаться сделать ее невыбираемой.
<select name="test">
<option val="a">A</option>
<option val="b">B</option>
<option disabled="disabled">----</option>
<option val="c">C</option>
<option val="d">D</option>
</select>
Смотрите: http://jsfiddle.net/qM5BA/283/
Ответ 2
Я столкнулся с этой проблемой раньше, и единственным кросс-браузерным способом для этого является использование горизонтального символа в виде юникода. Браузеры не отображают пробелы между этими символами. Конечно, это также означает, что ваша страница должна принимать unicode (utf-8), которая почти соответствует данным дням.
Вот демонстрационная версия, в которой используется light horizontal":
<option value="" disabled="disabled">─────────────────────────</option>
В качестве разделителя можно использовать различные параметры символа в кодировке Юникода, которые должны отображаться без пробелов между ними:
"─", "━", "┄", "┅", "┈", "┉"
Подробнее о символах рисования в кодировке unicode здесь: http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm
Вы также можете включить их с помощью символов escape-символов HTML (копирование и вставка обычно работают, вставляя последовательность символов UTF-8 в поле, которые, похоже, уважают браузеры, но если это не вариант), это для четырех световых горизонтальных меток в строке:
────
который отображается как
────
Ответ 3
Элемент select может содержать только элементы optgroup или option, а элементы option могут содержать только текст. Разметка типа <hr> запрещена.
Я бы использовал такой элемент, чтобы создать разделитель:
<option disabled role=separator>
Вы можете рассмотреть разметку следующим образом:
<optgroup label="-------"></optgroup>
Тем не менее, рендеринг между разными браузерами может быть слишком большим, чтобы быть приемлемым.
Ответ 4
Вы можете использовать em emash "-". У каждого персонажа нет видимых пробелов.
В HTML:
<option value disabled>—————————————</option>
Или в XHTML:
<option value="" disabled="disabled">—————————————</option>
Ответ 5
<option>----------</option>
или
<option>__________</option>
но вы не можете написать <option><hr /></option>
вы также можете добавить класс css в пустой <option> с фоновым изображением
<option class="divider"> </option>
Ответ 6
Если вы хотите вставить сортировщик в тег, вы можете сделать что-то вроде этого: http://jsfiddle.net/k4emic/4CfEp/
Однако это не рекомендуется.
Ответ 7
Я использовал JSP, но вы увидите, что это то же самое. Я повторяю через mapMap LinkedHashMap, где, если key >= 50000, то это разделитель строк, иначе это обычный вариант выбора. (Мне это нужно в моем проекте)
<c:forEach items="${brandMap}" var="entry">
<c:if test="${entry.key ge 50000}">
<option value=${entry.key} disabled>––––</option>
</c:if>
<c:if test="${entry.key lt 50000}">
<option value=${entry.key}>${entry.value}</option>
</c:if>
Ответ 8
Это старый пост, но я столкнулся с большим количеством постов, в которых никто даже не удосужился найти элегантное решение, хотя оно и простое.
Все пытаются добавить что-то между тегами <option>, но никто не задумывался о том, чтобы СТИЛИРОВАТЬ <option>, что является единственным способом сделать это и выглядеть потрясающе.
Чтобы легко быть правдой? Посмотрите
<select>
<option>First option</option>
<option>Second option</option>
<option>Third option</option>
<option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
<option>Another option</option>
<option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
<option>Something else</option>
</select>
Я поместил стиль с HTML для простоты.
Это больше не работает, понятно, не знаю, почему люди продолжают публиковать ответы. Правила изменились, это решение сработало, я сам им пользуюсь. В настоящее время я использую плагины jQuery для этого.
Позднее редактирование: каждый может использовать удивительный плагин selectpicker
Ответ 9
что лучше, вы можете использовать стили семантики-ui.
<div class="ui dropdown">
<option>Male</option>
<option>Female</option>
<div class="ui divider"></div>
<option>Outhers</option>
</div>
приведенный выше код работает... 100% лучшие результаты для outpers
Ответ 10
Простой способ:
<h2 style="
font-family:Agency FB;
color: #006666;
table-layout:fixed;
border-right:1px solid #006666;
border-right-width:400px;
border-left:1px solid #006666;
border-left-width:400px;
line-height:2px;"
align="center"> Products </h2>