如何使用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>的边界？

回答

相关问题