카테고리 보관물: Html

Html

html 선택 옵션 구분자 구분 기호를 어떻게 만드나요? New

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 }

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