Skip to main content
adicionou 39 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

É 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 @MagicHatdica do colega @MagicHat), assim por exemplo:

No entanto nestes casos os itens não ficarão sobrepostos pois não é possivelpossível controlar totalmente a lista de itens no select.

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

No entanto nestes casos os itens não ficarão sobrepostos pois não é possivel controlar totalmente a lista de itens no select.

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

No entanto nestes casos os itens não ficarão sobrepostos pois não é possível controlar totalmente a lista de itens no select.

adicionou 1076 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

É 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 é possivel controlar totalmente a lista de itens no select.

Isso não acontece só no IEInternet 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 a tagnão afetam as tags <option>

Isso não acontece só no IE, também ocorre em vários navegadores que usam WebKit 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 a tag <option>

É 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 é possivel 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>

adicionou 575 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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.

Se quiser algo pronto, tente DropKick, exemplo de uso:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="../css/dropkick.css" rel="stylesheet">
<script src="../js/dropkick.min.js"></script>

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

E o jQuery deve ser algo como:

$(function() {
    $("#test select").dropkick();
});
<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>

Se quiser algo pronto, tente DropKick, exemplo de uso:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="../css/dropkick.css" rel="stylesheet">
<script src="../js/dropkick.min.js"></script>

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

E o jQuery deve ser algo como:

$(function() {
    $("#test select").dropkick();
});

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.

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>
adicionou 56 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 162 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 51 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Tentativa de melhorar a resposta
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
added 39 characters in body
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
added 43 characters in body
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
gramática, ortografia e formatação
Fonte Link
Maniero
  • 484,4mil
  • 94
  • 1,3mil
  • 2,2mil
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando