html seçenek ayırıcı seçme

Seçme etiketinde ayırıcı nasıl yapılır?

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

Devre dışı bırakılan seçenek yaklaşımı en iyi görünen ve en iyi desteklenen görünüyor. Ben de optgroup kullanarak bir örnek dahil ettik.

optgroup (bu şekilde biraz berbat):

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

devre dışı bırakılmış seçenek (biraz daha iyi):

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

Ve gerçekten süslü olmak istiyorsanız, yatay unicode kutu çizim karakterini kullanın.
(EN İYİ SEÇENEK!)

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

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

Deneyin:

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

Bu eski bir iş parçacığıdır, ancak kimse benzer bir yanıt göndermediğinden, bunu tercih ettiğim ayırma yolu olarak ekleyeceğim.

Seçim kutusunun genişliğinden daha kısa olabileceğinden tire ve benzeri bir şekilde göze batan bir şey buluyorum. Bu yüzden, ayırıcılarımı oluşturmak için CSS kullanmayı tercih ediyorum .. basit bir arka plan rengi.

<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 öğesini kullanmak istemiyorsanız, tire işaretlerini bir seçenek öğesine yerleştirin ve devre dışı bırakılmış niteliğini verin. Görünür olacak, ancak gri renkte olacak.

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

Genişletilmiş karakter kümesinden yatay bir çubuk sembolü kullanarak değiştirdiğim normal hiphon yerine, kullanıcı bu karakterin yerini alan ancak benim için iyi çalışan başka bir ülkede ise çok hoş görünmeyecek. Bazı harika efektler için kullanabileceğiniz bir dizi farklı bölüm vardır ve css dahil değildir.

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

CSS'de bir sınıf tanımlayın:

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

HTML ile yaz:

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

@Laurence Gonsalves'in bir cevaba yorumunu yapıyorum çünkü anlamsal olarak çalışan ve bir kesmek gibi görünmeyen tek cevap bu.

Bunu stil sayfanıza eklemeyi deneyin:

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

Bir demet çizgiden çok daha az sevimsiz görünüyor.

başka bir yolu seçeneği sadece bir firefox ile çalışmak ve bir "----" yedek var gibi görünüyor seçeneği üzerinde bir css 1x1 arka plan görüntüsü kullanmaktır

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

veya javascript (jquery) kullanmak için:

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

ayrıca bkz . Bir html seçim denetimine nasıl yatay çizgi ekleyebilirim?

Yalnızca WebKit ise, aşağıdakileri kullanabilirsiniz: <hr> gerçek bir ayırıcı oluşturmak için .

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

"-" em tire işaretini kullanabilirsiniz. Her karakter arasında görünür boşluk yoktur.
( Bazı yazı tiplerinde!)

HTML'de:

<seçenek değeri = "—————————————" "devre dışı> ————————————— </option>

Veya XHTML'de:

<seçenek değeri = "—————————————" "devre dışı =" devre dışı "> ————————————— </option>

Bu her zaman en iyisidir.

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

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

bunu da yapabilirsiniz. kolaydır ve bölücü seçim açılır listesini yapın.

Şartlı olarak alternatif renk ve arka plan seçtim. Bir sıralama düzeni ayarlama ve vue.js ile, böyle bir şey yaptım:

<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