如何使用div來模擬<select>的邊界？

我正在嘗試爲選擇標籤提供邊框，並且在過去的2個小時內拉出了我的頭髮。如何使用div來模擬<select>的邊界？

我在通過絕對和相對使用位置之前完成了它，但是我的硬盤驅動器崩潰了，我的所有代碼都丟失了。

簡單地說我有

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

這似乎並沒有工作... 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：

來源

2011-02-15 wo0kie

任何原因你不能直接把邊框樣式放到Select元素上？ – jerebear

必須是跨瀏覽器兼容的。 – wo0kie

請提供一些代碼和meawhile嘗試向左浮動選擇框的父div – Mahima

我已經想出了一個解決方案，涉及浮動和「清除：兩個」似乎跨瀏覽器工作。

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

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

似乎工作正常。感謝Mahima重申我正在努力並向侯賽因尋求幫助。 :)

來源

2011-02-15 19:23:17 wo0kie

你可以使用jQuery來做這件事。跨瀏覽器兼容。檢查工作示例http://jsfiddle.net/Npv8P/2/

來源

2011-02-15 04:48:09 Hussein

也許這只是我，但我所看到的是選擇的頂部和左邊的邊界？：S – wo0kie

@ wo0kie再試一次。增加了一些填充。 – Hussein

看起來不錯，除非我需要一種方法將其移除，並且需要將其沖刷到選擇框的兩側。 :) – wo0kie

如何使用div來模擬<select>的邊界？

回答

相關問題