O resultado final do que explicaremos aqui será um select oculto com um span o sobrepondo e exibindo o valor. Ao clicar no select as opções dele são exibidas normalmente da forma nativa.

O único problema desta técnica é que não funciona no IE6 (segundo o Jeremias: “IE IE IE é safado tem q morrer“), pois ele (browser burro) não suporta opacidade no select, então para IE6 podemos apenas colocar uma cor de fundo no select para não destoar muito do desenho – Isto chama-se Graceful Degradation (que por sinal também merece um futuro Post).

Como é de praxe, começamos pelo HTML:

<div class="styleCombobox">
  <select title="Selecione">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
  </select>
</div>

Utilizamos uma div encapsulando o select, pois através do script vamos inserir um span antes do select exibindo o valor selecionado. No atributo title podemos inserir um valor inicial (valor que não precisa aparecer nas opções da combobox – ex.: “Selecione uma opção”).

Agora vamos criar um CSS para os estilos da nossa combobox conforme o desenho. No nosso exemplo colocaremos apenas um background cinza para não sair do foco do post.

Além dos estilos do desenho, vamos deixar o select sem opacidade – Os browsers ocultam somente a parte do valor do select, então quando clicarmos nele as opções serão exibidas.

.styleCombobox {
  width:200px;
  background:gray;
}
.styleCombobox span {
  position:absolute;
}
.styleCombobox select {
  width:100%;
  opacity:0;
  filter:alpha(opacity=0);
}

No script que estamos disponilibizando também colocamos a funcionalidade de foco para o select, então precisamos criar outro estilo para ele:

.comboboxFocus {
  border:dotted 1px #CCC;
}

Como comentado no início do post, no caso do IE6 você pode criar hacks para alterar as cores do select para ficar mais próximo do desenho, mas não entraremos no mérito.

Agora você precisa baixar o plugin desenvolvido pela Grifo neste link styleCombobox e importá-lo na sua página. A chamada fica dessa forma:

<script type="text/javascript">
  $(".styleCombobox select").styleCombobox({
    classFocus:"comboboxFocus"
  });
</script>

Para usuários com javascript desabilitado, vamos exibir os selects normais do browser com o noscript:

<noscript>
  <style type="text/css">
  .styleCombobox select {
    filter:alpha(opacity=1);
    opacity:1;
  }
  </style>
</noscript>

As técnicas mostradas foram testadas em IE6 (apesar de neste funcionar parcialmente) e superiores, Firefox 3.6, Chrome e Safari. Qualquer problema que encontrarem em outras versões de browser, mobile ou outros do gênero nos avisem para tentarmos aprimorar a técnica. Sugestões de melhoria também são bem-vindas.

Veja um exemplo de personalização de combobox em funcionamento.

Abraços e até a próxima!