How to force elements to appear below in IE?

It is possible to make the size of the select Change thus displaying the items (you must specify the quantity), for this you must use the attribute size="" (according to a tip of colleague @ MagicHat ), 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 multiple attribute (the problem with this one is that it enables 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 be overlapped as it is not can fully control the list of items in select.

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

Or reason

Unlike most elements, the <option>s usually do not they are rendered by the rendering engine for the browser, but yes, the larger it is separated from such an engine is, in other words, those who "renders" them, that is, the "app" is application - busting{[43] in} the ) options within the <select> as soon as you "click" and turns it into a Widget (this application has a high level of), which when you have selected one of the items, it sends a response back to the car.

So the element <option> is as if only a" database "that the browser sends to the application and in turn the application generates the"high-level Widget".

See an example are smartphones that instead of showing the overlapping items ( dropdown list ) is shown something like:

I.e. the browser itself can generate, or pass the task to the system and from this point receives the control signals (when selecting an item or canceling), but there is almost none 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: 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 formatted content to be displayed in a screen (such as a monitor, projector, etc.)

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

What is a high level Widget

^{Source: Wikipedia Widget}

High-level Widgets would be the end objects themselves. They often make references to low-level objects provided by the operating system command. It objects are easily found in development libraries (toolkit) or in frameworks. Some examples are:

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

Workaround

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

If you want something ready, try DropKick , example usage:

<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>

Some native browser components have behaviors that cannot be edited via CSS. This behavior of the select should occur split to the size of the list of items, placement of the select in the window, etc.

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

In this link you can choose one that suits you.

Beware of these customizations, building Javascript-dependent applications can be a shot in the foot. Always look for components that do not make it impossible to use if Javascript is disabled.

Some components also support WAI ARIA which are rules applied to HTML to increase the accessibility of your code. Although these rules are mostly treated as resources for the visually impaired, they are excellent resources for users to use for example within the car using voice command or assist search robos like GoogleBot to correctly identify and index the type of content.

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