html chọn phân cách tùy chọn

Làm thế nào để bạn tạo một dấu phân cách trong một thẻ chọn?

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

Phương pháp tùy chọn bị vô hiệu hóa có vẻ như tốt nhất và được hỗ trợ tốt nhất. Tôi cũng đã bao gồm một ví dụ về việc sử dụng optgroup.

optgroup (cách này hơi tệ):

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

tùy chọn bị vô hiệu hóa (tốt hơn một chút):

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

Và nếu bạn muốn thực sự lạ mắt, hãy sử dụng ký tự vẽ hộp unicode ngang.
(LỰA CHỌN TỐT NHẤT!)

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

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

Thử:

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

Đây là một chủ đề cũ, nhưng vì không ai đăng một phản hồi tương tự, tôi sẽ thêm nó như là cách tách ưa thích của tôi.

Tôi thấy việc sử dụng dấu gạch ngang và như vậy sẽ hơi mỏi mắt vì nó có thể thiếu chiều rộng của hộp lựa chọn. Vì vậy, tôi thích sử dụng CSS để tạo các dấu phân cách của mình .. một màu nền đơn giản.

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

Nếu bạn không muốn sử dụng phần tử optgroup, thay vào đó hãy đặt dấu gạch ngang trong một phần tử tùy chọn và cung cấp cho nó thuộc tính bị vô hiệu hóa. Nó sẽ được nhìn thấy, nhưng màu xám.

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

Thay vì dấu gạch ngang thông thường tôi đã thay thế nó bằng biểu tượng thanh ngang từ bộ ký tự mở rộng, nó sẽ trông rất đẹp nếu người dùng ở một quốc gia khác thay thế ký tự đó nhưng hoạt động tốt với tôi. Có một loạt các nhân vật khác nhau mà bạn có thể sử dụng cho một số hiệu ứng tuyệt vời và không có css liên quan.

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

Xác định một lớp trong CSS:

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

Viết bằng HTML:

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

Tôi đang đưa ra nhận xét của @Laurence Gonsalves vì ​​đây là câu duy nhất hoạt động theo ngữ nghĩa và không giống như một bản hack.

Hãy thử thêm phần này vào biểu định kiểu của bạn:

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

Ít nhìn hơn cheesy hơn một loạt các dấu gạch ngang.

một cách khác là sử dụng hình nền css 1x1 trên tùy chọn dường như chỉ hoạt động với firefox và có dự phòng "----"

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

hoặc sử dụng 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/

xem thêm Làm cách nào để thêm một đường ngang trong điều khiển chọn html?

Nếu chỉ có WebKit, bạn có thể sử dụng <hr>để tạo một dấu tách thực sự.

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

Bạn có thể sử dụng dấu gạch ngang "-". Nó không có khoảng trống có thể nhìn thấy giữa mỗi nhân vật.
(Trong một số phông chữ!)

Trong HTML:

<tùy chọn giá trị = "Bẻ khóa

Hoặc trong XHTML:

<tùy chọn giá trị = "Đầm cùi, vui vẻ, vui vẻ" bị vô hiệu hóa "

Cái này là tốt nhất luôn.

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

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

bạn cũng có thể làm điều này nó là dễ dàng và làm cho chia ngăn chọn danh sách thả xuống.

Tôi đã chọn để thay thế màu sắc và nền. Đặt thứ tự sắp xếp và với vue.js, tôi đã làm một cái gì đó như thế này:

<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