É possível estilizar uma checkbox de seleção?

Eu tenho uma checkbox de seleção HTML que eu preciso para estilo. Eu prefiro usar apenas CSS, mas se eu tiver que usar o jQuery para preencher as lacunas.

Alguém pode recomendar um bom tutorial ou plugin?

Eu sei, Google, mas tenho procurado as ú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 estilizar todos os aspectos de uma checkbox de seleção

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

Eu vi alguns plugins jQuery lá fora, que convertem ‘s para

    e para

  1. , para que você possa estilizá-lo com CSS. Não poderia ser muito difícil de rolar o seu próprio.

    Aqui está um: https://gist.github.com/1139558 (usado para ele aqui , mas parece que o site está em baixo.)

    Use assim:

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

    Estilo 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 os dois que eu vi que valem a pena conferir são:

    • Escolhido – um monte de coisas legais, 7k + observadores no github. (mencionado por “um nerd pago” nos comentários)
    • Select2 – inspirado por Chosen, parte do Angular-UI com alguns tweaks úteis no Chosen.

    sim!


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

    • Adiciona imagens e texto para select options
    • Pode usar o JSON para preencher as 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

    Quanto ao CSS, o Mozilla parece ser o mais amigável, especialmente a partir do FF 3.5+. Os navegadores Webkit, na maioria das vezes, apenas fazem suas próprias coisas e ignoram qualquer estilo. O IE é muito limitado, embora o IE8 permita que você, pelo menos, defina a cor / largura da borda.

    O que se segue realmente parece bastante agradável em 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, você tem que desabilitar a cor de fundo na opção, se você não quer que ela seja exibida quando o menu de opções não é puxado para baixo. E, como eu disse, o webkit faz sua própria coisa.

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

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

    isso é assim você ainda pode clicar nele

    Em seguida, crie div com as mesmas dimensões da checkbox de seleção. O div deve estar sob a checkbox 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; } 
    {the text of the the current selection updated by javascript}

    Atualize o innerHTML do div com javascript. Easypeasy com jQuery:

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

    É isso aí! Apenas estilo seu div em vez da checkbox de seleção. Eu não testei o código acima, então você provavelmente precisará modificá-lo. Mas espero que você obtenha a essência.

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

    Aqui está um pequeno plug se você quer

    • enlouquecer personalizar o estado fechado de um elemento select
    • mas no estado aberto , você favorece uma melhor experiência nativa para escolher opções (roda de rolagem, teclas de seta, foco de tabulação, modificações de ajax para options , zindex adequado, etc)
    • não gosta das marcações bagunçadas ul , li geradas

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

     $('select').yaselect(); 

    E a marcação final é:

     

    Confira no github.com

    Você pode estilizar em algum grau com CSS por si só

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

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

    No entanto, isso só vai te levar tão longe, e nem sempre parece muito bom. Para um controle completo, você precisará replace um select via jQuery por um widget próprio que emule a funcionalidade de uma checkbox de seleção. Assegure-se de que, quando JS estiver desativado, uma checkbox de seleção normal esteja em seu lugar. Isso permite que mais usuários usem seu formulário e isso ajuda na acessibilidade.

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

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Eu notei um erro sobre isso que o atributo Onchange não funciona

    Acabei de encontrar isso que parece muito 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:

      

    Agora o código HTML dentro da tag body:

     
    Select one entry:

    Atualizado para 2014: você não precisa do jQuery para isso . Você pode estilizar totalmente uma checkbox de seleção sem jQuery usando StyleSelect . Por exemplo, dada a seguinte checkbox de seleção:

      

    Executar styleSelect('select.demo') criaria uma checkbox de seleção estilizada da seguinte maneira:

    insira a descrição da imagem aqui

    Eu criei o plugin jQuery, SelectBoxIt , um par de dias atrás. Ele tenta imitar o comportamento de uma checkbox de seleção HTML comum, mas também permite estilizar e animar a checkbox de seleção usando 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 .

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

    http://github.com/Igor10k/ikSelect

    Isso parece velho, mas aqui um plugin muito interessante – http://uniformjs.com

    isso usa os estilos de twitter-bootstrap do twitter-bootstrap para ativar a select no dropdown suspenso https://github.com/silviomoreto/bootstrap-select

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

    O JQuery Code parece semelhante a este.