HTML wybierz opcję separatora opcji

Jak zrobić separator w tagu select?

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

Opcja wyłączonej opcji wydaje się wyglądać najlepiej i najlepiej obsługiwana. Podałem również przykład użycia grupy optgroup.

optgroup (w ten sposób trochę do bani):

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

opcja wyłączona (nieco lepiej):

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

A jeśli chcesz być naprawdę fantazyjny, użyj poziomej postaci do rysowania w polu unicode.
(NAJLEPSZA OPCJA!)

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

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

Próbować:

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

To jest stary wątek, ale ponieważ nikt nie opublikował podobnej odpowiedzi, dodam to, ponieważ jest to mój preferowany sposób separacji.

Uważam, że używanie myślników i tego rodzaju jest trochę mętlikiem, ponieważ może nie być szerszy niż pole wyboru. Wolę więc używać CSS do tworzenia moich separatorów .. prostego kolorowania tła.

<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>

Jeśli nie chcesz używać elementu optgroup, umieść myślniki w elemencie opcji i nadaj mu atrybut disabled. Będzie widoczny, ale wyszarzony.

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

Zamiast zwykłego hyphon zastąpiłem go za pomocą symbolu poziomego paska z rozszerzonego zestawu znaków, nie będzie wyglądać ładnie, jeśli użytkownik będzie w innym kraju, który zastępuje ten znak, ale działa dobrze dla mnie. Istnieje wiele różnych postaci, których można użyć do uzyskania świetnych efektów i nie wymaga udziału css.

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

Zdefiniuj klasę w CSS:

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

Napisz w HTML:

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

Zamieniam komentarz @Laurence Gonsalves w odpowiedź, ponieważ jest to jedyny, który działa semantycznie i nie wygląda na włamanie.

Spróbuj dodać to do swojego arkusza stylów:

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

O wiele mniej tandetny wygląd niż kilka kresek.

innym sposobem jest użycie obrazu tła 1x1 css na opcji, która wydaje się działać tylko z Firefoksem i ma awarię „----”

<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/

lub użyć javascript (jquery) do:

-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/

zobacz także Jak dodać poziomą linię w kontrolce wyboru HTML?

Jeśli jest to tylko WebKit, możesz użyć <hr>do utworzenia prawdziwego separatora.

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

Możesz użyć em myślnika „-”. Nie ma widocznych spacji między każdą postacią.
(W niektórych czcionkach!)

W HTML:

<wartość opcji = "—————————————" wyłączone> ————————————— </option>

Lub w XHTML:

<wartość opcji = "—————————————" disabled = "disabled"> ————————————— </option>

Ten jest zawsze najlepszy.

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

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

możesz to zrobić również. jest to łatwe i sprawia, że ​​lista rozwijana wybierz dzielnik.

Wybrałem warunkowo naprzemiennie kolor i tło. Ustawiając porządek sortowania i przy pomocy vue.js, zrobiłem coś takiego:

<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