7

No Internet Explorer, quando eu clico no <select> a lista aparece em cima dele, em vez de ficar embaixo.

Tentei este código:

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

Pensei que conseguiria manipular o <option> desta maneira, mas nem se mexeu. Existe algum modo de editar o option nem que seja só no IE?

2
  • 3
    Isso geralmente acontece quando o select está perto do fim da janela e não há espaço para a lista. Onde está o seu select? Pode postar um demo resumido no jsfiddle ou similar? E que versão do IE você está usando?
    – bfavaretto
    Commented 3/02/2014 às 3:25
  • Olá, primeiro gostaria de me desculpar por qualquer eventualidade, conversei com outro colega no chat, e talvez tenhamos encontrado uma solução para o seu problema em HTML puro, todavia eu adicionei um exemplo para usar o evento .open na lib Dropkick. Espero que lhe ajude ;)
    – Syzoth
    Commented 6/09/2016 às 19:08

2 Respostas 2

4

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

dropdown-list em diversos sistemas

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 , , etc.) e informações de formatação (como , , 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 .

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>
3
  • Na verdade até da pra editar sim o OPTION via css mas só consegui no chrome e no FF. O lance é que estou usando a propriedade appearance para editar o select e quando eu faço uma seleção no option o internet explorer deixa um fundo azul de seleção que fica em cima da arte do SELECT, mas vlw pela resposta se precisar realmente vou partir para o javascript
    – user4451
    Commented 4/02/2014 às 18:22
  • @user4451 foi o que eu disse "ocorre em vários navegadores", não em todos. Por exemplo, é provável que nenhum navegador mobile seja possível manipular <option>, no Firefox para Desktop é possível pois é uma opção do motor "Gecko", no Chrome apenas a cor pode ser mudada (Chrome usa Blink uma fork do WebKit), mas na verdade é como se o estilo aplicado ao <option> fosse copiado para um "Widget". Em outras palavras, é como se "estilos" e "options" dentro do "seletc" fossem apenas uma "base de dados" (ou de estrutura) para ser "copiado" para um "widget"...
    – Syzoth
    Commented 4/02/2014 às 19:01
  • @user4451 ... e só o desenvolvedor do navegador pode definir se o "widget" irá receber todas propriedades CSS (é provável que ele tenha que converter o CSS para um propriedade de estilo aceitável dentro do Widget). Nota: Widgets são elementos visuais criados geralmente em C/C++, Java, etc.
    – Syzoth
    Commented 4/02/2014 às 19:02
1

Há alguns componentes nativos dos browser possuem comportamentos que não podem ser editados via CSS. Este comportamento do select deve ocorrer divido ao tamanho da lista de itens, posicionamento do select na janela, etc.

Se isto for realmente necessário, existe plugins em Javascript que trocam os componentes nativos para códigos HTML que podem ser formatados.

Neste link você pode escolher algum que lhe atenda.

Cuidado com essas personalizações, criar aplicativos dependentes do Javascript pode ser um tiro no pé. Procure sempre componentes que não impossibilite a utilização caso o Javascript esteja desabilitado.

Alguns componentes tambem fornecem suporte a WAI ARIA que são regras aplicadas ao HTML para aumentar a acessibilidade do seu código. Essas regras apesar de serem tratadas na maioria das vezes como recursos para deficientes visuais, são recursos excelentes para que os usuários consigam utilizar por exemplo dentro do carro utilizando o comando de voz ou auxilam robos de busca como o GoogleBot a identificar e indexar corretamente o tipo de conteúdo.

Outra coisa que deve ter em mente é o suporte para mobile, alguns destes componentes não ficam usuais em dispositivos móveis. Para contonar este problema, você pode optar por escolher componentes voltados para frameworks CSS, como o Twitter Bootstrap ou Fundation, ou mesmo o jQuery Mobile.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .