How to force <option> elements to appear below <select> in IE?

Question

In Internet Explorer, when I click on <select> the list appears on top of it instead of underneath it.

I tried this code:

select{ width:50px; height:50px; float:left; position:relative; }
select option{ position:absolute; top:50px; left:0;}

I thought I could manipulate <option> this way, but it didn’t even move. Is there any way to edit the option even if it’s only in IE?

Answer 1

It is possible to make the size of the select be changed by displaying the items (you must specify the quantity), for this you must use the attribute size="" (in accordance with a tip from colleague @Magichat), so for example:

<select name="setor" size="2">
    <option value="a">setor a</option>
    <option value="b">setor b</option>
</select>

You can also use the attribute multiple (The problem with this is that it enables you to select multiple items):

<select name="setor" multiple>
    <option value="a">setor a</option>
    <option value="b">setor b</option>
</select>

However in these cases the items will not overlap because it is not possible to fully control the list of items in select.

This not only happens in Internet Explorer, it also occurs in various browsers that use Webkit, Chrome (Blink) and portable browsers (for example, smartphones and tablets), the most CSS allows is to exchange things like background-color and color, properties like filter, position and margin do not affect the tags <option>

The reason

Unlike most elements, the <option>s are usually not rendered by browser rendering engine, but rather by the larger application that is separated from such engine, in other words who "renders" they are the "application" and is application "magpie" the options within the <select> the moment you "click" and turn into a Widget (High level widgets) that when selected one of the items it sends a reply back to the engine.

So the element <option> it is as if it were just a "database" that the browser sends to the application and in turn the application generates the "high level widget".

Here’s an example of smartphones that instead of showing overlay items (dropdown list) is shown something like:

That is, the browser itself can generate, or pass the task to the system and from this point it receives the control signals (when it selects an item or cancels), but there is almost no control by DOM, for this reason it is not possible to force to display the items of a select.

What is the rendering engine

^{Source: The Wikipedia rendering engine}

Rendering engine (or layout engine) is software that transforms content into markup language (such as html, xml, etc.) and formatting information (such as css, xsl, etc.) in a content formatted to be displayed on a screen (such as a monitor, projector, etc..)

It is typically used by browsers, email clients, or other software that needs to show (or edit) content from web.

What is a High Level Widget

^{Source: Wikipedia Widget}

High-level widgets would be the final objects themselves. They often refer to low-level objects provided by the operating system command. These objects are easily found in development libraries (Toolkit) or frameworks. Some examples are:

• wxWidgets is an open source package with tools for creating multi-platform graphical interfaces.
• Cocoa and Aqua from Apple Inc. Mac OS X V10.4;
• Microsoft Foundation Classes (MFC)
• Windows Template Library (WTL)
• Motif used in Common Desktop Environment (Unix CDE);
• Lesstif, Open Source (LGPL), a version of Motif;
• GTK+ Cross-platform open source, used in the GNOME environment.
• SWT/Jface (of the Eclipse - eclipse.org project) is an API library for GUI that uses native widgets via JNI layer (native code Java encapsulation).

Workaround

The best way to get around this problem is to create a combobox (<select>) simulated, using <div>, <ul>, <li> and tabindex=""

If you want something ready, try Dropkick, example of use:

<link href="../css/dropkick.css" rel="stylesheet">
<script src="../js/dropkick.min.js"></script>

<form id="test">
    <select name="tipo" id="combo1">
        <option value="a">tipo a</option>
        <option value="b">tipo b</option>
    </select>

    <select name="setor" id="combo2">
        <option value="a">setor a</option>
        <option value="b">setor b</option>
    </select>
</form>

<script>
    (function() {
        var combo1 = new Dropkick("#combo1");
        var combo2 = new Dropkick("#combo2");

        combo1.open(); //Abre o combo1
    })();
</script>

Answer 2

There are some native browser components that have behaviors that cannot be edited via CSS. This select behavior should occur divided to the item list size, select placement in the window, etc.

If this is really necessary, there are Javascript plugins that exchange native components for HTML code that can be formatted.

At this link you can choose one that suits you.

Beware of these customizations, creating Javascript-dependent apps can be a shot in the foot. Always look for components that cannot be used if Javascript is disabled.

Some components also provide WAI ARIA support which are rules applied to HTML to increase the accessibility of your code. These rules, even though they are mostly treated as resources for the visually impaired, are excellent features for users to be able to use for example inside the car using the voice command or help search robots like Googlebot to correctly identify and index the type of content.

Another thing to keep in mind is the mobile support, some of these components are not usual on mobile devices. To address this issue, you can choose to choose components for CSS frameworks, such as Twitter Bootstrap or Fundation, or even jQuery Mobile.