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

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?

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;
}

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:

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.

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.

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

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.

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

Acabei de encontrar isso que parece realmente bom.

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

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>

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:

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

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

Parece antigo, mas aqui um plugin muito interessante - http://uniformjs.com

este sobre os usos, os twitter-bootstrapestilos para transformar selectem dropdownMenu https://github.com/silviomoreto/bootstrap-select

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>