ตัวแยกตัวเลือกเลือก HTML

คุณสร้างตัวคั่นในแท็กที่เลือกได้อย่างไร

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

วิธีตัวเลือกที่ปิดใช้งานดูเหมือนจะดูดีที่สุดและได้รับการสนับสนุนที่ดีที่สุด ฉันได้รวมตัวอย่างของการใช้ optgroup

optgroup (วิธีนี้ครับครับ):

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

ตัวเลือกที่ปิดใช้งาน (ดีขึ้นเล็กน้อย):

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

และถ้าคุณต้องการที่จะแฟนซีจริงๆให้ใช้อักขระการวาดกล่องยูนิโค้ดแนวนอน
(ตัวเลือกที่ดีที่สุด!)

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

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

ลอง:

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

นี่เป็นเธรดเก่า แต่เนื่องจากไม่มีใครโพสต์คำตอบที่คล้ายกันฉันจะเพิ่มสิ่งนี้เนื่องจากเป็นวิธีแยกที่ฉันต้องการ

ฉันพบว่าใช้เครื่องหมายขีดคั่นและดูเหมือนว่าจะมีอาการปวดตาบ้างเพราะอาจขาดความกว้างของกล่องตัวเลือก ดังนั้นฉันชอบที่จะใช้ CSS เพื่อสร้างตัวคั่นของฉัน .. สีพื้นหลังที่เรียบง่าย

<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 ให้ใส่เครื่องหมายขีดคั่นในองค์ประกอบตัวเลือกแทนและให้แอตทริบิวต์ที่ปิดใช้งาน มันจะมองเห็นได้ แต่เป็นสีเทา

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

แทนที่จะใช้ hyphon ปกติที่ฉันแทนที่โดยใช้สัญลักษณ์แถบแนวนอนจากชุดอักขระแบบขยายมันจะดูไม่ดีมากหากผู้ใช้อยู่ในประเทศอื่นที่มาแทนที่อักขระนั้น แต่ใช้งานได้ดีสำหรับฉัน มีช่วงของ chacters ต่าง ๆ ที่คุณสามารถใช้สำหรับลักษณะพิเศษยอดเยี่ยมบางอย่างและไม่มี css เกี่ยวข้อง

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

กำหนดคลาสใน CSS:

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

เขียนเป็น HTML:

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

ฉันกำลังแสดงความคิดเห็น @Laurence Gonsalves เป็นคำตอบเพราะเป็นคำเดียวที่ใช้ความหมายและไม่เหมือนกับแฮ็ค

ลองเพิ่มลงในสไตล์ชีทของคุณ:

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

ดูน้อยลงวิเศษกว่าพวงประ

อีกวิธีหนึ่งคือการใช้ภาพพื้นหลัง css 1x1 บนตัวเลือกซึ่งดูเหมือนว่าจะทำงานกับ firefox เท่านั้นและมีทางเลือก "----"

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

หรือเพื่อใช้ 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/

ดูเพิ่มเติม ฉันจะเพิ่มเส้นแนวนอนใน html select control ได้อย่างไร

หากเป็น WebKit เท่านั้นคุณสามารถใช้<hr>เพื่อสร้างตัวแยกจริง

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

คุณสามารถใช้ประประ "-" ไม่มีช่องว่างระหว่างอักขระแต่ละตัว
(ในแบบอักษรบางแบบ!)

ใน HTML:

<option value = "—————————————" ปิดการใช้งาน> ——————————————— </option>

หรือใน XHTML:

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

อันนี้ดีที่สุดเสมอ

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

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

คุณสามารถทำสิ่งนี้ได้เช่นกัน มันเป็นเรื่องง่ายและทำให้รายการเลือกแบบหล่นลงเลือก

ฉันเลือกสีและพื้นหลังแบบมีเงื่อนไข การจัดเรียงลำดับและด้วย vue.js ฉันทำสิ่งนี้:

<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