放置HTML SELECT的下拉窗口 [英] Positioning the drop down window of a HTML SELECT
问题描述
我正在使用HTML SELECT标记，并希望确保当用户点击箭头将其置于控件的文本框"部分下方时打开的窗口.
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.
问题是IE似乎只是根据选择任意打开窗口，但我需要确保一致的位置，因为页面上还有其他元素需要始终保持可见状态
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
这是当前的标记
<!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>
推荐答案
对不起.恐怕这是不可能的.问题是<select>下拉菜单使用浏览器的本机下拉菜单渲染.这意味着样式功能有限，并且因浏览器而异.我也看到了您在OSX Chrome上描述的行为-在选择框下方未打开.
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.
您可以完全完全控制样式的唯一方法是使用完全自定义的内容-使用DOM和javascript构建<select>:
The only way you can have complete control the styles completely is to use something completely custom - building the <select> using DOM and javascript:
查看以下内容: http://gregfranko.com/jquery.selectBoxIt.js/
选择库时，请确保选择一个将本机<select>标记转换为自定义的库-IE标记不应针对您的HTML自定义.这样一来，当浏览器没有JavaScript时，您的<select>下拉列表仍应起作用
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
这篇关于放置HTML SELECT的下拉窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
