Arquivo da tag: select

Personalizando Select com JQuery

Muitas vezes nos deparamos com situações que exigem o uso da propriedade select em algum projeto web. As vezes o projeto exige dos programadores que o select seja mais elaborado ou diferenciado.
Nos padrões do HTML temos um select com poucas alternativas de customização, o que, em muitos casos não vem acalhar com as nossas reais necessidades de personalização.
Quando tudo esta difícil na web aparece o JQuery para resolver a nossa vida. O plugin Custom Select trás toda a flexibilidade para adaptarmos o nosso select da forma que for necessário.

Exemplo do select no código HTML:

<select name="dormitorios"  title="Exemplo:">
    <option value="1">1 exemplar</option>
    <option value="2">2 exemplar </option>
    <option value="3">3 exemplar </option>
    <option value="4">4 exemplar </option>
    <option value="5">5 exemplar </option>
</select>

Vamos para a configuração:

1 – Baixar a biblioteca principal do JQuery  jquery.tools.min.js

2 -Baixar o plugin jquery.customselect.js

3 – Chamar os arquivos js em seu html:

<script type="text/javascript" src="/path/to/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.customselect.js"></script>

4 – Inserir em seu código HTML a função que executa o nosso plugin;

<script type="text/javascript">
$(document).ready(function(){
    $('#select').SelectCustomizer();
});
</script>

 

CSS do select

Propriedade 1 – _iconselect

Vai ser a primeira parte do nosso select, onde se localizarão configurações como: tamanho da fonte, tipo de fonte, background do campo, entre outros.

Esta propriedade _iconselect é um sufixo gerado pelo próprio plugin.

Ex: A sua configuração no CSS ficará assim:

select_iconselect {
...
}

Propriedade 2 – _options

Esta propriedade é responsável pela configuração da nossa caixa de itens, ou seja, propriedades como tamanho da caixa, barra de rolagem entre outras. A propriedade no código CSS ficará assim:

select_options {
...
}

 

Propriedade 3 – selectwrapper e selectfooter

Esta propriedade vai configurar todos os itens do nosso select em associação com outras propriedades.

Aqui vai alguns códigos que serão relacionados com essa propriedade para a personalização do nosso select no CSS:

.selectwrapper {…}
.selectwrapper .selectitems{...}
.selectwrapper .last{...}
.selectwrapper .selectitems span{...}
.selectwrapper .hoverclass {...}
.selectwrapper .selectedclass {…}

Também temos a propriedade selectfooter que como o próprio nome induz, faz referencia a configurações do nosso rodapé, da caixa de itens.
No código CSS ficará assim:

.selectfooter {…}

Abaixo a imagem de um select personalizado:

OBS: Lembrando que estas propriedades são geradas automaticamente pelo nosso plugin. Por isso não incluímos nem uma dessas classes ao nosso HTML, apenas a propriedade select em sua forma natural.