Usabilidade e acessibilidade são toda a raiva agora e isso é ótimo porque está lentamente tornando a web um lugar melhor. Infelizmente, alguns dos presentes em nossas malas de truques não são suficientes para o tabaco quando se trata dessas duas áreas. Um tal bem é o bom velho select elemento especificamente com o multiple atributo habilitado. Que tal nós acabamos com eles e tentamos algo diferente?

O maior problema com as caixas de seleção múltipla é que selecionar várias opções é uma dor, especialmente se houver o suficiente para criar uma barra de rolagem dentro da caixa. O local mais comum que eu vi esse cenário é em sistemas de gerenciamento de conteúdo. Por exemplo, digamos que você está escrevendo um artigo para um site em um CMS e quer que ele apareça em várias categorias na parte frontal de um site. (Assuma que o sistema não é usando tags para este exemplo.) Para relacioná-lo a essas categorias, uma caixa de seleção múltipla geralmente é exibida com todas as categorias do site como opções. Você deveria segurar Ctrl e selecione cada categoria. Isso pode incluir rolagem dentro da caixa e se você adora usar a roda de rolagem dandy acessível em ratos, então você pode clicar novamente na caixa para ativar o foco e começar a rolar para baixo - mas aguarde! Você acabou de clicar sem segurar Ctrl então você simplesmente desmarcou todas as opções selecionadas anteriormente. Agora você tem que voltar e lembrar o que escolheu e usar a barra de rolagem para se deslocar para baixo. Claro, você define o foco no elemento, selecionando os elementos com Ctrl mas nem todos sabem disso. Todo esse apoio e forthing deixa de ser uma verdadeira dor.

Por que não substituir essa caixa de seleção complicada por uma lista de verificação rolável? Recentemente, eu estava trabalhando no Visual Studio e percebi um controle chamado CheckedListBox (quem nomeia estas coisas?) E pensei que tentaria fazer uma para uso na web usando alguns elementos padrão e um pouco de CSS. Siga em baixo para ver como eu fiz isso veja o resultado final final ou confira alguns exemplos extravagantes.

O primeiro passo é criar a estrutura. Eu fiz isso simplesmente usando uma lista desordenada, alguns rótulos e caixas de seleção:

<form action="#" method="get">
    <ul class="checklist">
        <li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget
 tellus</label></li>
        <li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue
 id velit</label></li>
        <li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac
 augue adipiscing sodales</label></li>
        <li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer
 ante eget urna</label></li>
        <li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis
 cursus purus tristique condimentum</label></li>
        <li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere
 lectus vitae velit consequat volutpat</label></li>
        <li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum
 nulla et tortor.</label></li>
        <li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat
 faucibus mi</label></li>
        <li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis
 massa viverra laoreet</label></li>
        <li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida
 lorem vel odio</label></li>
    </ul>
</form>

Essa classe na lista desordenada é tudo o que precisamos para fazer a lista de verificação. O que nós vamos fazer é tão básico que pode ser aplicado em muitas áreas, mas eu apenas estou usando isso para listas de verificação por enquanto. Em seguida, adicionamos um pouco de CSS:

.checklist {
    border: 1px solid #ccc;
    list-style: none;
    height: 20em;
    overflow: auto;
    width: 16em;
}

.checklist, .checklist li { margin: 0; padding: 0; }

.checklist label {
    display: block;
    padding-left: 25px;
    text-indent: -25px;
}

.checklist label:hover { background: #777; color: #fff; }

Agora, temos listas de verificação roláveis muito básicas sem todo o incômodo de se preocupar em desmarcar as opções selecionadas anteriormente. Configuração overflow: auto é o que cria a área rolável e com as unidades de altura e largura definidas como ems, a coisa inteira é redimensionável. Nós também modelamos os rótulos para ter uma exibição de bloco para tornar a opção completa clicável e adicionar algum preenchimento, mas definir um recuo de texto negativo para que as palavras possam se encaixar na próxima linha sem aparecer abaixo das caixas de seleção. Um estilo adicional útil foi adicionado aos rótulos ao pairar sobre eles para que os usuários saibam que eles podem clicar neles.

Faça o IE rodar bem

Já terminou, certo? Não. Como de costume no mundo do CSS, o Internet Explorer cria uma cabeça incômoda e impõe limites indesejados. Infelizmente, configurando a propriedade label propriedade para "bloquear" traz o infame erro de espaço em branco no qual o IE exibe o espaço em branco entre a tag li. Para resolver isso, use o hack Holly e adicione uma declaração de altura às propriedades do rótulo:

.checklist label {
    display: block;
    height: 1%;
    padding-left: 25px;
    text-indent: -25px;
}

A última coisa que precisamos fazer para o IE é implementar uma versão do JavaScript introduzida no A List Apart's Suckerfish Dropdowns. Este JavaScript permite que o IE altere o plano de fundo dos rótulos, assim como os navegadores modernos fazem com o :hover pseudoclass:

function initChecklist() {
    if (document.all && document.getElementById) {
        // Get all unordered lists
	   var lists = document.getElementsByTagName("ul");
        
        for (i = 0; i < lists.length; i++) {
            var theList = lists[i];
            
		  // Only work with those having the class "checklist"
            if (theList.className.indexOf("checklist") > -1) {
                var labels = theList.getElementsByTagName("label");
                
			 // Assign event handlers to labels within
                for (var j = 0; j < labels.length; j++) {
                    var theLabel = labels[j];
                    theLabel.onmouseover = function() { this.className += " hover"; };
                    theLabel.onmouseout = function() { this.className = 
this.className.replace(" hover", ""); };
                }
            }
        }
    }
}

Carregue esta função quando a página é carregada usando o addLoadEvent do Simon Willison e você estara bem.

Agora você é livre para classificar suas listas de verificação, como quiser, e você tem muito mais liberdade ao fazê-lo do que tentar selecionar caixas de estilo. Confira o resultado final ou dê uma olhada em algumas possibilidades.

Eu não sou especialista, então, se cometi um erro em algum lugar ou as coisas podem ser simplificadas um pouco mais, não hesite em oferecer sugestões.

Atualização: O Internet Explorer 7 é conhecido por exibir as listas de verificação roláveis de forma incorreta. Isto é devido à correção aplicada para fazer o Internet Explorer jogar legal como mencionado acima. Felizmente, a solução é simples. Basta remover a declaração height: 1%; e colocá-lo em sua própria linha e oriente as versões IE 6 e abaixo:

.checklist label {
    display: block;
    padding-left: 25px;
    text-indent: -25px;
}

* html .checklist label { height: 1%; }

A segmentação é feita fazendo uso do popular star hack.

As amostras foram atualizadas com o ajuste.