div를 사용하여 <select>에 테두리를 에뮬레이션하는 방법은 무엇입니까?

Question

나는 선택 태그에 테두리를 제공하려고 시도하고 있으며 지난 2 시간 동안 머리카락을 꺼냈다.

절대 및 상대 경로를 통해 위치를 사용하기 전에 완료했지만 하드 드라이브가 손상되어 모든 코드가 손실되었습니다.

는 어떻게 설정하는 내용의 폭과 반대로

내가 작동하지 않는 것

<div style="position:relative; border:1px solid #cc0000;"> 
    <select style="position:absolute;"> 
     <option>1</option> 
    </select> 
</div> 

이

을 간단히 말하면 ... 사업부는 자동으로 부모 DIV의 폭으로 확장 div는 자동으로 선택 상자의 내용에 맞춰지며 프레임 밖으로 밀려 나지 않고 1px의 테두리가 있습니까?

코드가 더 필요하면 알려주세요.

모든 도움을 주시면 감사하겠습니다. :)

편집

여기에 좀 더 코드의 ...

HTML :

<div class="orderQuantity"> 
    <label for="quantity" class="orderInputLabel">Quantity:</label> 
    <div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! --> 
     <select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required"> 
      <option value=''>&#160;&#160;&#160;&#160;&#160;</option> 
      <option value='10'>10</option> 
      <option value='20'>20</option> 
      <option value='30'>30</option> 
      <option value='40'>40</option> 
      <option value='50'>50</option> 
      <option value='60'>60</option> 
      <option value='70'>70</option> 
      <option value='80'>80</option> 
      <option value='90'>90</option> 
      <option value='100'>100</option> 
     </select> 
    </div> <!-- end of div that needs border --> 
</div> 

CSS :

.orderQuantity { 
    margin-top: 12px; 
} 

이것은 내가 지금까지 가지고있는 것입니다. 나는 여러 가지를 시도했지만 그 중 아무 것도 효과가 없었다. 선택 절대와 부모 div를 만드는 것과 그 반대도 마찬가지입니다.

도움 말? D :

Answer 1

저는 크로스 브라우저에서 작동하는 것으로 보이는 "float : both"와 관련된 솔루션을 알아 냈습니다.

<div style="float:left;"> <!-- just toggle border on this div using jquery --> 
    <select> 
     <option>1</option> 
    </select> 
</div> 

<div style="clear:both;"></div> 

정상적으로 작동하는 것 같습니다. Mahima가 내가 시도한 것을 재확인하고 후세인에게 도움을 주심에 감사드립니다. :)

Answer 2

이 경우 jQuery를 사용할 수 있습니다. 크로스 브라우저 호환. 작업 예제를 확인하십시오. http://jsfiddle.net/Npv8P/2/