本文介绍了放置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的下拉窗口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-13 14:31