html 선택 옵션 구분자

select 태그에서 구분 기호를 어떻게 만드나요?

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 요소를 사용하지 않으려면 대신 대시를 옵션 요소에 넣고 disabled 속성을 지정하십시오. 표시되지만 회색으로 표시됩니다.

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

일반 하이포 대신 확장 문자 세트의 가로 막대 기호를 사용하여 교체했습니다. 사용자가 해당 문자를 대체하는 다른 국가에 있으면 잘 작동합니다. 훌륭한 효과를 위해 사용할 수있는 다양한 체터가 있으며 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/

또는 자바 스크립트 (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 선택 컨트롤에 수평선을 추가하려면 어떻게합니까?를 참조하십시오 .

WebKit 전용 인 <hr>경우 실제 구분 기호를 만드는 데 사용할 수 있습니다 .

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

em 대시 "—"를 사용할 수 있습니다. 각 문자 사이에 공백이 없습니다.
( 일부 글꼴에서!)

HTML에서 :

<option value = "—————————————"비활성화 됨> ——————————— </ option>

또는 XHTML에서 :

<option value = "—————————————"disabled = "disabled"> ——————————— </ 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