Как добавить горизонтальную линию в элемент управления 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>&ndash;&ndash;&ndash;&ndash;</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">&nbsp;Products&nbsp;</h2>