HTML-Optionstrennzeichen auswählen

Wie macht man ein Trennzeichen in einem ausgewählten Tag?

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

Der Ansatz mit deaktivierten Optionen scheint am besten auszusehen und am besten unterstützt zu werden. Ich habe auch ein Beispiel für die Verwendung der optgroup beigefügt.

optgroup (auf diese Weise saugt irgendwie):

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

deaktivierte Option (etwas besser):

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

Und wenn Sie wirklich ausgefallen sein möchten, verwenden Sie das horizontale Unicode-Box-Zeichen.
(BESTE OPTION!)

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

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

Versuchen:

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

Dies ist ein alter Thread, aber da niemand eine ähnliche Antwort gepostet hat, werde ich dies hinzufügen, da dies meine bevorzugte Art der Trennung ist.

Ich finde die Verwendung von Bindestrichen und dergleichen etwas ärgerlich, da sie die Breite des Auswahlfelds unterschreiten könnten. Daher bevorzuge ich die Verwendung von CSS, um meine Trennzeichen zu erstellen. Eine einfache Hintergrundfarbe.

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

Wenn Sie das optgroup-Element nicht verwenden möchten, fügen Sie die Bindestriche stattdessen in ein Optionselement ein und geben Sie ihm das Attribut disabled. Es wird sichtbar, aber ausgegraut sein.

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

Anstelle des normalen Hyphons, das ich durch ein horizontales Balkensymbol aus dem erweiterten Zeichensatz ersetzt habe, sieht es nicht besonders gut aus, wenn sich der Benutzer in einem anderen Land befindet, das dieses Zeichen ersetzt, aber für mich gut funktioniert. Es gibt eine Reihe verschiedener Charaktere, die Sie für einige großartige Effekte verwenden können, und es ist kein CSS beteiligt.

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

Definieren Sie eine Klasse in CSS:

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

Schreiben Sie in HTML:

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

Ich mache aus dem Kommentar von @Laurence Gonsalves eine Antwort, weil es die einzige ist, die semantisch funktioniert und nicht wie ein Hack aussieht.

Versuchen Sie, dies Ihrem Stylesheet hinzuzufügen:

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

Viel weniger kitschig als ein paar Striche.

Eine andere Möglichkeit besteht darin, ein CSS 1x1-Hintergrundbild für die Option zu verwenden, das nur mit Firefox zu funktionieren scheint und einen "----" - Fallback aufweist

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

oder um Javascript (jquery) zu verwenden, um:

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

Siehe auch Wie füge ich eine horizontale Linie in ein HTML-Auswahlsteuerelement ein?

Wenn es sich nur um WebKit handelt, können Sie <hr>ein echtes Trennzeichen erstellen.

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

Sie können den Bindestrich "-" verwenden. Es gibt keine sichtbaren Leerzeichen zwischen den einzelnen Zeichen.
(In einigen Schriftarten!)

In HTML:

<option value = "——————————————" disabled> ————————————— </ option>

Oder in XHTML:

<option value = "—————————————" disabled = "disabled"> ———————————— </ option>

Dieser ist immer am besten.

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

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

Sie können dies auch tun. Es ist einfach und lässt den Teiler die Dropdown-Liste auswählen.

Ich entschied mich dafür, Farbe und Hintergrund bedingt zu wechseln. Beim Festlegen einer Sortierreihenfolge und mit vue.js habe ich Folgendes gemacht:

<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