6

Tenho o seguinte código:

<select multiple="multiple" id="carros" size="1" name="carros">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

No 10, o select renderiza com size igual a um e as setas de navegação como esperado, o 27.0.1 renderiza com size um, mas sem as setas de navegação e o 32.0.1700.102 m nunca respeita o size menor que quatro e somente após o quarto elemento habilita as setas de navegação.

Eu sei que com height eu conseguiria o comportamento esperado. Existe algum jeito de fazer com que e respeitem o comportamento igual ao do 10, com o size realmente igual a um e com as setas de navegação somente usando HTML?

Segue um fiddle de exemplo que deve ser aberto em cada browser para visualizar o problema.

2
  • Há realmente a necessidade de usar select multiple="multiple"? Commented 20/02/2014 às 21:04
  • @TiagoCesarOliveira select multiple="multiple" é a única maneira que conheço de selecionar mais de um elemento, certo? Commented 21/02/2014 às 1:22

1 Resposta 1

3

No Chrome não é possível resolver apenas com HTML devido a um bug não resolvido quando o atributo size é menor que 4.

E o Firefox também tem um bug aberto marcado para resolução futura, ou seja, eles não dão prioridade nenhuma para isso.

Creio que a razão para esses bugs nunca terem sido corrigidos é que não faz sentido um elemento de seleção múltipla que exibe apenas um elemento por vez.

Quanto se fala sobre um browser "respeitar o comportamento" de outro, isso é um assunto delicado, afinal cada navegador tem suas características próprias. Provavelmente, o IE só funciona porque ele usa componentes nativos do Windows, enquanto os outros navegadores usam componentes próprios. E eu acho quase ninguém ia querer que esses navegadores passassem a imitar o IE.


Update: alternativas

Pensando em como resolver a questão de não usar mais espaço na tela e ao mesmo tempo prover uma boa experiência ao usuário em todos os navegadores, a solução que encontrei ser mais viável e direta para implementar seria o uso de um componente wrapper ao select do HTML. Um deles é o jQuery UI MultiSelect, embora não esteja certo sobre a compatibilidade nas versões antigas do Internet Explorer.

Outra opção seria criar uma versão simplificada das setas para subir e descer o scroll com Javascript para rolar o conteúdo do select. Sinceramente, não sei se essa solução iria se comportar bem em todos os navegadores. Fiz um teste bem simples neste fiddle. É necessário investir um tempo para testá-la.

Segue o código principal:

$('#up').click(function() {
    $('select').scrollTop($('select').scrollTop() - 10);
});
$('#down').click(function() {
    $('select').scrollTop($('select').scrollTop() + 20);
});

E uma última alternativa que considerei foi redimensionar o campo quando ele receber o foco para que o usuário possa selecionar os itens. Veja o exemplo de código:

$('select')
.focus(function() {
    $(this).animate({height: "60px"}, 500);
})
.blur(function() {
    $(this).animate({height: "20px"}, 500);
});

Fiddle

11
  • 2
    Concordo que não faz sentido um select de seleção múltipla ter apenas um elemento sendo exibido por vez. Aliás, há formas mais elegantes de resolver tais questões. Pessoalmente nunca usei selects múltiplos, mas não estou me colocando aqui como modelo para alguém. Apenas denoto que é pouco usual sua utilização, daí a displicência em tratar tal "feature". Commented 20/02/2014 às 21:03
  • @utluiz Acho que esse é o primeiro e, talvez, único caso em que os outros deveriam imitar o IE, afinal de contas a regra é clara, tem que aparecer as setas de navegação se o número de elementos é maior que o atributo size e o número de linhas a aparecer é definida por tal atributo. Commented 21/02/2014 às 1:27
  • @TiagoCesarOliveira sou desenvolvedor back-end e não mexo com HTML e CSS. Recebo-os definidos e implemento, por questão de layout o cliente definiu o HTML assim porque o browser homologado para sistemas de intranet é o IE 8, mas como eu desenvolvo usando Chrome e FF percebi a diferença entre os dois, fui olhar o IE e percebi o terceiro comportamento. O cliente está satisfeito, eu que queria uma solução mais elegante pros usuários de FF e Chrome, pois apesar de não-homologados não são proibidos, mas funcionar mesmo tem que ser IE 8 pra cima. Commented 21/02/2014 às 1:35
  • @PhilippeGioseffi entendi! Bom ver que você se preocupa com outros browsers! Commented 21/02/2014 às 1:38
  • @TiagoCesarOliveira de qualquer maneira obrigado, usarei CSS pra definir um comportamento igual nos três. Assim consigo certo? Commented 21/02/2014 às 1:42

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 .