定位 HTML SELECT 的下拉窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23542687/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Positioning the drop down window of a HTML SELECT
提问by Chris Hammond
I am using an HTML SELECT tag and want to make sure the window that opens when the user hits the arrow to position below the "textbox" part of the control.
我正在使用 HTML SELECT 标记并希望确保当用户点击箭头以定位在控件的“文本框”部分下方时打开的窗口。
The problem is that IE seems to just open the window arbitrarily depending on the selection but I need to ensure consistent positioning as there are other elements on the page that need to remain visible at all times
问题是 IE 似乎只是根据选择随意打开窗口，但我需要确保一致的定位，因为页面上还有其他元素需要始终保持可见
Here's the current markup
这是当前的标记
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="margin-left: 5px; margin-top: 5px">
<div style="position: relative;">
<select style="position: absolute; top: 10px; left: 10px;">
<optgroup label="Choice A">
<option value="A-A">Sub choice A</option>
<option value="A-B">Sub choice B</option>
</optgroup>
<optgroup label="Choice B">
<option value="B-A">Sub Choice A</option>
<option value="B-B">Sub Choice B</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
采纳答案by jonycheung
Sorry. I'm afraid this is not possible. The problem is <select>dropdowns uses browser's native rendering of dropdowns. This means that there is limited styling capability and differ by browsers. I see the behavior you described on my OSX Chrome as well - not opening below the select box.
对不起。恐怕这是不可能的。问题是<select>下拉菜单使用浏览器对下拉菜单的原生渲染。这意味着样式功能有限且因浏览器而异。我也看到了你在我的 OSX Chrome 上描述的行为 - 没有在选择框下方打开。
The only way you can have complete control the styles completely is to use something completely custom - building the <select>using DOM and javascript:
您可以完全控制样式的唯一方法是使用完全自定义的东西 - 构建<select>using DOM 和 javascript：
Check out this: http://gregfranko.com/jquery.selectBoxIt.js/
看看这个：http: //gregfranko.com/jquery.selectBoxIt.js/
When selecting a library, make sure to pick one that transforms the native <select>tag into custom - IE the markup shouldn't be custom for your HTML. This is so when browsers don't have JavaScript, your <select>dropdown should still work
选择库时，请确保选择将本机<select>标记转换为自定义的库 - 即标记不应为您的 HTML 自定义。这就是当浏览器没有 JavaScript 时，你的<select>下拉菜单应该仍然有效
