HTML 선택 컨트롤에 수평선을 어떻게 추가합니까?

HTML 선택 컨트롤에 수평선을 어떻게 추가합니까?

---

<hr>드롭 다운 컨트롤 또는 HTML의 선택 컨트롤에 수평선 ( 태그)을 추가 하려면 어떻게합니까?

---

일반적으로 이것은의 기능이 아니며 <select>, 대부분의 브라우저는 해당 컨트롤에 대해 매우 열악한 스타일 제어를 가지고 있습니다. Firefox에서는 다음을 수행 할 수 있습니다 (다른 브라우저에서는 작동하지 않음).

<select name="test">
    <option val="a">A</option>
    <option val="b" class="select-hr">B</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

CSS 사용 :

option.select-hr { border-bottom: 1px dotted #000; }

그러나 일반적으로 말해서 유일한 방법은 대시로 옵션을 넣고 선택 불가능하게 만드는 것입니다.

<select name="test">
    <option val="a">A</option>
    <option val="b">B</option>
    <option disabled="disabled">----</option>
    <option val="c">C</option>
    <option val="d">D</option>
</select>

참조 : http://jsfiddle.net/qM5BA/283/

---

나는 이전 에이 문제를 겪었고 이것을 달성하는 유일한 브라우저 간 방법은 가로 문자를 그리는 유니 코드 상자를 사용하는 것입니다. 브라우저는 이러한 문자 사이에 공백을 렌더링하지 않습니다. 물론 그것은 또한 당신의 페이지가 요즘 거의 주어진 유니 코드 (utf-8)를 받아 들여야한다는 것을 의미합니다.

다음은 " 밝은 수평 "상자 표시를 사용하는 데모입니다 .

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

사이에 공백없이 렌더링되어야하는 구분자로 사용할 수있는 다양한 유니 코드 상자 문자 옵션이 있습니다.

"─", "━", "┄", "┅", "┈", "┉"

유니 코드 상자 그리기 문자에 대한 자세한 내용은 http://www.duxburysystems.com/documentation/dbt11.2/miscellaneous/Special_Characters/Unicode_25xx.htm을 참조 하십시오.

HTML 이스케이프 문자를 사용하여 포함 할 수도 있습니다 (복사 및 붙여 넣기는 일반적으로 브라우저가 존중하는 것처럼 보이는 상자 문자의 UTF-8 시퀀스를 삽입하여 작동합니다.하지만 옵션이 아닌 경우), 이것은 4 개의 밝은 수평 상자 표시를 연속으로 표시합니다. :

2,500 ~ 2,500 ~ 2500 ~

다음과 같이 렌더링되는

────

---

select요소 만 포함 할 수 있습니다 optgroup또는 option요소 및 option요소는 텍스트 만 포함 할 수 있습니다. 다음과 같은 마크 업은 <hr>금지되어 있습니다.

다음과 같은 요소를 사용하여 구분 기호를 만듭니다.

<option disabled role=separator>

다음과 같은 마크 업을 고려할 수 있습니다.

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

그러나 서로 다른 브라우저 간의 렌더링은 허용하기에는 너무 많이 다릅니다.

---

엠 대시 "—"를 사용할 수 있습니다. 각 문자 사이에 보이는 공백이 없습니다.

HTML에서 :

<옵션 값 비활성화> ————————————— </ option>

또는 XHTML에서 :

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

---

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

또는

<option>__________</option>

하지만 당신은 쓸 수 없습니다 <option><hr /></option>

<option>배경 이미지 가있는 빈 공간에 CSS 클래스를 추가 할 수도 있습니다.

<option class="divider"> </option>

---

태그에 종류의 구분자를 삽입하려면 다음과 같이 할 수 있습니다. http://jsfiddle.net/k4emic/4CfEp/

그러나 이것은 권장되는 방법이 아닙니다.

---

JSP를 사용했지만 동일하다는 것을 알 수 있습니다. key> = 50000이면 줄 구분 기호이고 그렇지 않으면 일반 선택 옵션 인 brandMap LinkedHashMap을 반복하고 있습니다. (내 프로젝트에서 필요합니다)

<c:forEach items="${brandMap}" var="entry">
   <c:if test="${entry.key ge 50000}">
     <option value=${entry.key} disabled>&ndash;&ndash;&ndash;&ndash;</option>
   </c:if>
   <c:if test="${entry.key lt 50000}">
     <option value=${entry.key}>${entry.value}</option>
   </c:if>

---

이것은 오래된 게시물이지만 간단하지만 아무도 우아한 해결책을 찾지 못하는 많은 게시물을 만났습니다.
모두가 <option>태그 사이에 무언가를 추가하려고 노력하고 있지만 아무도 <option>태그 를 스타일링하는 것에 대해 생각하지 않았습니다. 이것이 태그를 만들고 멋지게 보일 수있는 유일한 방법입니다.

진실하기 쉽게? 보기

<select>
        <option>First option</option>
        <option>Second option</option>
        <option>Third option</option>
        <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Another option</option>
        <option style="border-bottom:1px solid rgba(153,153,153,.3); margin:-10px 0 4px 0" disabled="disabled"></option>
        <option>Something else</option>
    </select>

쉽게 html로 스타일을 배치했습니다.

This doesn't work anymore, it's clear, don't know why people keep posting answers. The rules changed, this solution worked, I've been using it myself. Nowadays I'm using jQuery plugins for this.

Lates edit: Everyone can use the amazing selectpicker plugin

Dropdown plugin

---

Simple Way :

<h2 style="
    font-family:Agency FB;
    color: #006666;
    table-layout:fixed;
    border-right:1px solid #006666;
    border-right-width:400px;
    border-left:1px solid #006666;
    border-left-width:400px;
    line-height:2px;"
align="center">&nbsp;Products&nbsp;</h2>

ReferenceURL : https://stackoverflow.com/questions/4317025/how-do-i-add-a-horizontal-line-in-a-html-select-control