如何使用 div 模拟 <select> 的边框？答案

【问题标题】：How to use div to emulate border for <select>?如何使用 div 模拟 <select> 的边框？
【发布时间】：2011-02-16 04:17:34
【问题描述】：

我正在尝试为选择标签提供边框，并且在过去 2 小时内一直在拉扯我的头发。

我在使用绝对和相对位置之前完成了它，但是我的硬盘崩溃了，我的所有代码都丢失了。

简单地说我有

<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：

【问题讨论】：

有什么理由不能将边框样式直接放在 Select 元素上？
必须是跨浏览器兼容的。
请提供一些代码，并尝试为选择框的父 div 向左浮动
向左浮动导致内联元素问题。使用 clear 修复它，但在 IE 上仍然无法正常工作。
我通常建议不要尝试为选择元素设置样式。如果你想要定制，你应该使用不同的元素。 I suggest radio buttons or checkboxes.

标签： html css positioning css-position

【解决方案1】：

您可以为此使用 jQuery。跨浏览器兼容。检查工作示例http://jsfiddle.net/Npv8P/2/

【讨论】：

也许只有我一个人，但我看到的只是选择的顶部和左侧的边框？ :S
@wo0kie 再试一次。添加了一些填充。
看起来不错，只是我需要一种方法将其移除并需要它与选择框的两侧齐平。 :)
它回答了它，但不是绝对或相对定位，这是我需要的。

【解决方案2】：

我想出了一个涉及浮动和“clear: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 重申了我的尝试并感谢 Hussein 的帮助。 :)

【讨论】：