É possivel fazer com que o tamanho do select seja alterado assim exibindo os itens (deve-se especificar a quantidade), para isto deve usar o atributo size=""
(conforme uma dica do colega @MagicHat), assim por exemplo:
<select name="setor" size="2">
<option value="a">setor a</option>
<option value="b">setor b</option>
</select>
Também é possível usar o atributo multiple
(o problema deste é que ele habilita selecionar múltiplos itens):
<select name="setor" multiple>
<option value="a">setor a</option>
<option value="b">setor b</option>
</select>
No entanto nestes casos os itens não ficarão sobrepostos pois não é possível controlar totalmente a lista de itens no select.
Isso não acontece só no Internet Explorer, também ocorre em vários navegadores que usam WebKit, Chrome (Blink) e navegadores para portáteis (por exemplo: smartphones e tablets), o máximo que o CSS permite é trocar coisas como background-color
e color
, propriedades como filter
, position
e margin
não afetam as tags <option>
O motivo
Diferente da maioria dos elementos, os <option>
s geralmente não são renderizados pelo motor de renderização do navegador, mas sim pela aplicação maior que é separada de tal motor, em outras palavras quem "renderiza" eles é a "aplicação" e está aplicação "pega" os options dentro do <select>
no momento que você "clica" e transforma em um Widget (Widgets de alto nível) que quando selecionado um dos itens ele envia uma resposta de volta para o motor.
Então o elemento <option>
é como se fosse apenas uma "base de dados" que o navegador envia para a aplicação e por sua vez a aplicação gera o "Widget de alto nível".
Veja um exemplo são os smartphones que ao invés de mostrar os itens sobrepostos (dropdown list) é mostrado algo como:
Ou seja o próprio browser pode gerar, ou passar a tarefa para o sistema e a partir deste ponto recebe os sinais de controle (quando seleciona um item ou cancela), mas não há quase nenhum controle por DOM, por este motivo não é possível forçar a exibir os itens de um select.
O que é o motor de renderização
Fonte: Mecanismo de renderização Wikipédia
Motor de renderização (ou motor de layout) é um software que transforma conteúdo em linguagem de marcação (como html, xml, etc.) e informações de formatação (como css, xsl, etc.) em um conteúdo formatado para ser exibido em uma tela (como um monitor, projetor, etc.)
Ele é tipicamente usado por navegadores, clientes de e-mail, ou outro software que necessite mostrar (ou editar) conteúdo da web.
O que é um Widget de alto nível
Fonte: Widget Wikipedia
Widgets de alto nível seriam os objetos finais propriamente ditos. Muitas vezes fazem referências a objetos de baixo nível fornecidos pelo comando do sistema operacional. Estes objetos são facilmente encontrados em bibliotecas de desenvolvimento (toolkit) ou em frameworks. Alguns exemplos são:
- wxWidgets é um pacote open source com ferramentas para criação de interfaces gráficas multi plataforma.
- Cocoa e Aqua da Apple Inc. Mac OS X v10.4;
- Microsoft Foundation Classes (MFC)
- Windows Template Library (WTL)
- Motif usado no Common Desktop Environment (Unix CDE);
- Lesstif, Código aberto (LGPL), uma versão do Motif;
- GTK+ Código aberto multi-plataforma, utilizado no ambiente GNOME.
- SWT/JFace (do projeto Eclipse - eclipse.org) é uma biblioteca de API para GUI que utiliza widgets nativos atraves de camada JNI (encapsulamento em Java de código nativo).
Solução alternativa
A melhor maneira para contornar este problema é você criar um combobox (<select>
) simulado, usando <div>
, <ul>
, <li>
e tabindex=""
Se quiser algo pronto, tente DropKick, exemplo de uso:
<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>
.open
na libDropkick
. Espero que lhe ajude ;)