Untitled Document

Olá, existem muitos plugins prontos na net que ajudam a criar selects customizáveis, mais muitos deles são compactados ou deveras complexos, abaixo descrevo um código simples e facil de enteder. **ATENÇÃO:** Para que este script funcione é necessaria a utilização do Jquery 1.4.2 ou superior. **Estruturando o HTML** ``` * O select é inserido sem nenhum tipo de formatação especial. ``` * Os values do campo option serão migrados para o html que será gerado. **Resultado do HTML após a mudança ** ```

Lorem ipsum

Lorem ipsum
Nononono nono no nono
122 non on ononon @@@@@

``` **Estruturando o CSS ** O estilo da lista varia de acordo com as necessidades do layout, porém alguns atributos referentes a estrutua é exibição são obrigatórios, segue: ``` .select{ position: relative; } .select span, .select ul{ position:absolute; top: 0; left:0; } .select ul { display:none; } ``` * No momento em que o úsuario passa o mouse em qualquer elemento da lista, essa recebe uma classe "active" para que o estilo possa ser manipulado via css. **A função** ``` $('select').each(function(){ var str = ''; var actualSelect = this; str +='' + $(this).find('option:first').text() + ''; str +='

' + $(this).text() + '

'; $(this).after($('

') .attr('class','select') .css('width',$(this).width()) .html(str) .click(function(){ //atualizo o tamanho do objeto de acordo com o select e adiciono a classe active no over $(this).find('*') .css('width',$(actualSelect).width()) .hover(function(){ $(this).addClass('active'); },function(){ $(this).removeClass('active'); }) //atualizo o posiciomaneto da ul e adiciono suas acoes $(this).find('ul') .css('top',$(this).find('span').outerHeight()) .slideToggle('fast') .parent().find('li').click(function(){ $(this).parents('div').find('span:first').text($(this).text()); //seleciono o option referente a li clicada $(this).parents('div').prev() .find('option').attr('selected',false) .eq($(this).parent().find('li').index(this)) .attr('selected',true) }) }) ) }).css('display','none'); ``` **Testando o código** Caso queira fazer um teste, copie o código abaixo e salve em versão html na sua maquina! ](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd) ``` ](http://www.w3.org/1999/xhtml) Untitled Document ```

Andre Assis

[Resolvido] Formulário - Manipulação de Selects

Jquery - Acessibilidade ( tamanho da fonte )