É possível estilizar uma caixa de seleção? [fechadas]

145

Eu tenho uma caixa de seleção HTML que preciso estilizar. Eu preferiria usar apenas CSS, mas se for necessário, usarei o jQuery para preencher as lacunas.

Alguém pode recomendar um bom tutorial ou plugin?

Eu sei, Google, mas tenho procurado nas últimas duas horas e não estou encontrando nada que atenda às minhas necessidades.

Precisa ser:

  • Compatível com jQuery 1.3.2
  • Acessível
  • Discreto
  • Completamente personalizável em termos de estilo para todos os aspectos de uma caixa de seleção

Alguém sabe alguma coisa que atenda às minhas necessidades?

Apoorv Khurasia
fonte
6
você quer dizer um menu suspenso personalizável (construído em jquery), certo? porque caixas de seleção não são mesmo objetos navegador (eles são objetos de plataforma), muito simples, muito cru, e você não pode estilo muito do que (você não pode estilo das fronteiras, por exemplo)
Ayyash
+1 para uma boa explicação e formatação!
Manish
6
Vale a pena mencionar o escolhido, mas não é muito personalizável e tem muitos problemas em aberto. É bom olhar e usar, no entanto.
um nerd pago
1
@ Ayyash O que você está dizendo é verdade para MSHTML (Internet Explorer e amigos) e WebCore (Safari) em alguns sistemas (certamente Mac OS). Não é verdade para o Gecko (Firefox e amigos). Portanto, esse problema real é que você não pode estilizar selectelementos entre navegadores. Mas se as pessoas estão dispostas a conviver com as diferenças, você pode estilizá-las - incluindo as fronteiras.
PointedEars 12/11/12
1
@PointedEras sim, em 2012 eles podem, mas im supondo que foi há 3 anos quando eu disse o que eu disse, im certeza que eu deu um tiro na época e que não funcionavam
Ayyash

Respostas:

45

Eu já vi alguns plugins jQuery por aí que convertem <select>para <ol>s e <option>para <li>s, para que você possa estilizá-lo com CSS. Não poderia ser muito difícil de criar.

Aqui está um: https://gist.github.com/1139558 (costumava estar aqui , mas parece que o site está fora do ar).

Use-o assim:

$('#myselectbox').selectbox();

Denomine-o assim:

div.selectbox-wrapper ul {
  list-style-type:none;
  margin:0px;
  padding:0px;
}
div.selectbox-wrapper ul li.selected { 
  background-color: #EAF2FB;
}
div.selectbox-wrapper ul li.current { 
  background-color: #CDD8E4;
}
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:2px;
  cursor:pointer;
}
Mark A. Nicolosi
fonte
Eu tentei esta versão inicialmente, mas o DIV não está posicionado em relação a onde está a caixa de seleção. Em vez disso, é posicionado com força à esquerda.
Eu não usei isso sozinho. A demo ( brainfault.com/demo/selectbox/0.5 ) parece boa. Procure outras implementações. Eu sei que já vi vários outros plugins que fazem isso.
Mark A. Nicolosi
1
Eu tentei isso e funcionou por um tempo até que eu tive que colocar mais de um na página. Agora é difícil estilizar porque, por algum motivo estúpido, o autor achou aceitável usar o mesmo ID para todos os elementos, em vez de IDs ou classes exclusivas. Agora estou pensando em escrever meu próprio ...
Jonathan
19
404 - alguma idéia onde havia espelhos?
Moak
2
Lembre-se de que a maioria dos plug-ins de menu selecionados não pode ser acessada pelos leitores de tela. Ainda não encontrei um que funcione.
Marcy Sutton
18

Atualização: A partir de 2013, as duas que vi que valem a pena conferir são:

  • Escolhido - um monte de coisas legais, mais de 7k observadores no github. (mencionado por 'um nerd pago' nos comentários)
  • Select2 - inspirado no Chosen, parte da interface do usuário angular com alguns ajustes úteis no Chosen.

sim!


Desde 2012, uma das soluções mais leves e flexíveis que encontrei é o ddSlick . Informações relevantes (editadas) do site:

  • Adiciona imagens e texto a select options
  • Pode usar JSON para preencher opções
  • Suporta funções de retorno de chamada na seleção

E aqui está uma prévia dos vários modos:

insira a descrição da imagem aqui

papercowboy
fonte
14

Quanto ao CSS, o Mozilla parece ser o mais amigável, especialmente do FF 3.5+. Os navegadores Webkit geralmente fazem suas próprias coisas e ignoram qualquer estilo. O IE é muito limitado, embora o IE8 permita pelo menos estilizar a cor / largura da borda.

Na verdade, o seguinte parece bastante bom no FF 3.5+ (escolhendo sua preferência de cor, é claro):

select {
    -moz-border-radius: 4px;
    -moz-box-shadow: 1px 1px 5px #cfcfcf inset;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
    background-color: transparent;
}
option {
    background-color: #fef5e6;
    border-bottom: 1px solid #ebdac0;
    border-right: 1px solid #d6bb86;
    border-left: 1px solid #d6bb86;
}
option:hover {
    cursor: pointer;
}

Mas, quando se trata do IE, é necessário desativar a cor de fundo da opção, se você não deseja que ela seja exibida quando o menu de opções não for puxado para baixo. E, como eu disse, o webkit faz suas próprias coisas.

arxpoetica
fonte
11

Encontramos uma maneira simples e decente de fazer isso. É cross-browser, degradável e não quebra uma publicação de formulário. Primeiro, defina a opacidade da caixa de seleção como 0.

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

isso é para que você ainda possa clicar nele

Em seguida, faça div com as mesmas dimensões da caixa de seleção. A div deve estar sob a caixa de seleção como plano de fundo. Use {position: absolute} e z-index para conseguir isso.

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

Atualize o innerHTML da div com javascript. Fácil com jQuery:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

É isso aí! Apenas estilize sua div em vez da caixa de seleção. Como não testei o código acima, você provavelmente precisará ajustá-lo. Mas espero que você entenda a essência.

Eu acho que essa solução supera {-webkit-aparecimento: nenhum;}. O que os navegadores devem fazer no máximo é ditar a interação com os elementos do formulário, mas definitivamente não a forma como eles são exibidos inicialmente na página, pois isso quebra o design do site.

Shaun
fonte
10

Aqui está uma pequena ficha, se você quiser

  • enlouquecer personalizando o estado fechado de um selectelemento
  • mas no estado aberto , você prefere uma melhor experiência nativa às opções de seleção (roda de rolagem, teclas de seta, foco da guia, modificações do ajax options, zindex adequado etc.)
  • não gosto das marcações bagunçadas ule ligeradas

Então jquery.yaselect.js poderia ser um ajuste melhor . Simplesmente:

$('select').yaselect();

E a marcação final é:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Confira no github.com

choonkeat
fonte
é incrível e funciona em dispositivos móveis, também :)
ovelhas voando
trabalha no IOS. desculpe, eu não tenho acesso ao android etc?
31712 ChooKeat
1
isso não era uma pergunta, era um elogio. ele faz o trabalho muito bem no meu android.
ovelha voadora
5

Você pode criar algum estilo com o CSS sozinho

select {
    background: red;
    border: 2px solid pink;
}

Mas isso depende inteiramente do navegador. Alguns navegadores são teimosos.

No entanto, isso só o levará até agora e nem sempre parece muito bom. Para um controle completo, você precisará substituir uma seleção via jQuery por um widget que simule a funcionalidade de uma caixa de seleção. Certifique-se de que, quando o JS estiver desativado, uma caixa de seleção normal esteja em seu lugar. Isso permite que mais usuários usem seu formulário e ajuda na acessibilidade.

alex
fonte
4

A maioria dos navegadores não suporta a personalização da tag select usando css. Mas acho esse javascript que pode ser usado para estilizar a tag select. Mas, como de costume, não há suporte para navegadores IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Observei um erro nesse atributo que o atributo Onchange não funcionava

SRI
fonte
2

Se tiver uma solução sem jQuery. Um link onde você pode ver um exemplo de trabalho: http://www.letmaier.com/_selectbox/select_general_code.html (estilizado com mais css)

A seção de estilo da minha solução:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

Agora, o código HTML dentro da tag body:

<form>
<div id="container" onMouseOver="document.getElementById('ul1').style.display = 'block';" onMouseOut="document.getElementById('ul1').style.display = 'none';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 1'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 2'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements['entrytext'].value='Entry 3'; document.getElementById('ul1').style.display = 'none';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>
Christoph Letmaier
fonte
Forneça um exemplo em vez de apenas vincular a um.
Todos os trabalhadores são essenciais
Mudei minha resposta conforme você solicitou.
Christoph Letmaier 17/02
1
Parece muito melhor agora. BTW, não há nada de errado em vincular a um exemplo de trabalho ou a uma fonte que mostra um exemplo (pode ser bastante útil). Porém, inevitavelmente, os links se tornam inválidos ao longo do tempo; portanto, é desejável sempre fornecer as informações necessárias na própria resposta (que você forneceu) mesmo quando links úteis são fornecidos.
Todos os trabalhadores são essenciais
Ok, entendi ... :-) vou tentar o meu melhor para manter o link vivo ...
Christoph Letmaier
2

Atualizado para 2014: você não precisa do jQuery para isso . É possível estilizar totalmente uma caixa de seleção sem o jQuery usando o StyleSelect . Por exemplo, dada a seguinte caixa de seleção:

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

A execução styleSelect('select.demo')criaria uma caixa de seleção com estilo da seguinte maneira:

insira a descrição da imagem aqui

mikemaccana
fonte
Nota lateral, sem suporte para o IE9 e inferior #
Ben Sewards
1

Eu criei o plugin jQuery, SelectBoxIt , alguns dias atrás. Ele tenta imitar o comportamento de uma caixa de seleção HTML normal, mas também permite estilizar e animar a caixa de seleção usando o jQueryUI. Dê uma olhada e deixe-me saber o que você pensa.

http://www.selectboxit.com

Greg Franko
fonte
1

Você deve tentar usar algum plugin jQuery como o ikSelect .

Tentei torná-lo muito personalizável, mas fácil de usar.

http://github.com/Igor10k/ikSelect

i10k
fonte
-1

A solução simples é deformar sua caixa de seleção dentro de uma div e modelar a div correspondente ao seu design. Defina opacidade: 0 para selecionar a caixa, ela ficará invisível. Insira uma tag de extensão com jQuery e altere seu valor dinamicamente se o usuário alterar o valor suspenso. Demonstração total mostrada neste tutorial com explicação de código. Espero que isso resolva seu problema.

O código JQuery se parece com isso.

 <script>
   $(document).ready(function(){
     $('.dropdown_menu').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value='"+ nodeOne +"']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>
user3716078
fonte