pemisah opsi html pilih

Bagaimana Anda membuat pemisah di tag pilih?

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

Pendekatan opsi yang dinonaktifkan tampaknya terlihat terbaik dan didukung terbaik. Saya juga menyertakan contoh menggunakan optgroup.

optgroup (cara ini agak menyebalkan):

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

opsi dinonaktifkan (sedikit lebih baik):

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

Dan jika Anda ingin benar-benar mewah, gunakan karakter menggambar kotak unicode horizontal.
(PILIHAN TERBAIK!)

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

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

Mencoba:

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

Ini adalah utas lama, tetapi karena tidak ada yang memposting respons yang sama, saya akan menambahkan ini karena ini adalah cara pemisahan yang saya sukai.

Saya menemukan menggunakan tanda hubung dan semacam itu agak merusak pemandangan karena bisa jatuh jauh dari lebar kotak pilihan. Jadi, saya lebih suka menggunakan CSS untuk membuat pemisah saya .. pewarnaan latar belakang yang sederhana.

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

Jika Anda tidak ingin menggunakan elemen optgroup, masukkan tanda hubung di elemen opsi dan berikan atribut yang dinonaktifkan. Itu akan terlihat, tetapi abu-abu.

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

Alih-alih hyphon biasa saya menggantinya menggunakan simbol bar horisontal dari set karakter yang diperluas, itu tidak akan terlihat sangat bagus jika pengguna di negara lain yang menggantikan karakter itu tetapi berfungsi dengan baik untuk saya. Ada serangkaian karakter berbeda yang dapat Anda gunakan untuk beberapa efek hebat dan tidak ada css yang terlibat.

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

Tentukan kelas dalam CSS:

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

Tulis dalam HTML:

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

Saya membuat komentar @Laurence Gonsalves menjadi jawaban karena itu satu-satunya yang bekerja secara semantik dan tidak terlihat seperti retasan.

Coba tambahkan ini ke stylesheet Anda:

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

Apalagi terlihat murahan daripada sekelompok tanda hubung.

Cara lain adalah dengan menggunakan gambar latar belakang css 1x1 pada opsi yang sepertinya hanya bekerja dengan firefox dan memiliki fallback "----"

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

atau menggunakan javascript (jquery) ke:

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

lihat juga Bagaimana cara menambahkan garis horizontal dalam kontrol pilih html?

Jika hanya WebKit, Anda dapat menggunakan <hr>untuk membuat pemisah yang nyata.

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

Anda dapat menggunakan tanda hubung em "-". Tidak ada spasi yang terlihat di antara setiap karakter.
(Dalam beberapa font!)

Dalam HTML:

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

Atau dalam XHTML:

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

Yang ini selalu yang terbaik.

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

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

Anda dapat melakukan ini juga. itu mudah dan membuat daftar pilih drop down pembagi.

Saya memilih warna dan latar belakang alternatif bersyarat. Mengatur urutan dan dengan vue.js, saya melakukan sesuatu seperti ini:

<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