定位HTML SELECT的下拉窗口
Chr*_*ond 7 html css html-select
我正在使用HTML SELECT标记,并希望确保当用户点击箭头位于控件的"文本框"部分下方时打开的窗口.
问题是IE似乎只是根据选择而任意打开窗口,但我需要确保一致的定位,因为页面上有其他元素需要始终保持可见
这是当前的标记
<!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上描述的行为 - 没有在选择框下面打开.
完全控制样式的唯一方法是使用完全自定义的东西 - 构建<select>使用DOM和javascript:
看看这个:http://gregfranko.com/jquery.selectBoxIt.js/
选择库时,请务必选择一个将本机<select>标记转换为自定义的库 - IE不应该为HTML自定义标记.当浏览器没有JavaScript时,您的<select>下拉列表仍然有用