html роздільник опцій

Як зробити роздільник у виділеному тезі?

New Window
New Tab
-----------
Save Page
------------
Exit

Підхід відключеного варіанту, здається, виглядає найкращим чином і найкращим чином підтримується. Я також включив приклад використання 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/

Спробуйте:

<optgroup label="----------"></optgroup>

Це стара нитка, але оскільки ніхто не опублікував подібної відповіді, я додам це, оскільки це мій кращий спосіб розділення.

Я вважаю, що використання дефісів і таких є дещо очейним, оскільки це може бути меншим від ширини поля вибору. Отже, я вважаю за краще використовувати 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>

Якщо ви не хочете використовувати елемент optgroup, замість цього додайте тире в елемент опції та надайте йому атрибут вимкнено. Це буде видно, але сірим.

<option disabled>----------</option>

Замість звичайного гіфону я замінив його символом горизонтальної смуги з розширеного набору символів, він буде виглядати не дуже приємно, якщо користувач знаходиться в іншій країні, яка замінює цей символ, але працює добре для мене. Існує ціла низка різних діаграм, які можна використати для отримання чудових ефектів, і тут немає жодного css.

<option value='-' disabled>――――</option>

Визначте клас у CSS:

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

Пишіть у HTML:

<select ...>
    <option disabled class="separator"></option>
</select>

Я роблю коментар @Laurence Gonsalves у відповідь, тому що це єдиний, який працює семантично і не схожий на злом.

Спробуйте додати це до таблиці стилів:

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

Набагато менш сирно виглядає, ніж купа тире.

інший спосіб - використовувати фонове зображення 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?

Якщо це лише WebKit, ви можете використовувати <hr>для створення справжнього роздільника.

http://code.google.com/p/chromium/isissue/detail?id=99534

Ви можете використовувати em dash "-". У ньому немає видимих ​​пробілів між кожним символом.
(У деяких шрифтах!)

У HTML:

<параметр значення = "—————————————„ вимкнено> ————————————— </option>

Або в XHTML:

<value value = "——————————————» disabled = „disabled“> ————————————— </option>

Цей найкращий завжди.

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

 <option  data-divider="true" disabled>______________</option>

Ви також можете зробити це. легко і зробити роздільник, що випадає зі списку.

Я вибрав умовно чергувати колір і фон. Встановлюючи порядок сортування та за допомогою 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