html 선택 옵션 구분자

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 } 

대시 대쉬보다 치즈 맛이 훨씬 적습니다.

---

another way is to use a css 1x1 background image on option which only seems to work with firefox and have a "----" 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/

or to use javascript (jquery) to:

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

---

see also How do I add a horizontal line in a html select control?

---

If it's WebKit-only, you can use <hr> to create a real separator.

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

---

You could use the em dash "—". It has no visible spaces between each character.
(In some fonts!)

In HTML:

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

Or in XHTML:

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

---

This one is best always.

 

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

 

---

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

you can do this one also. it is easy and make divider select drop down list.

---

I elected to conditionally alternate color and background. Setting a sort order and with vue.js, I did something like this:

<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

참고URL : https://stackoverflow.com/questions/899148/html-select-option-separator