Select Personalizado com Jquery do Zero!

Select Personalizado com Jquery

De todos os inputs do html o mais complicado de personalizar (na minha opinião) é o select, para obter o select personalizado geralmente todos recorrem ao uso de códigos prontos espalhados pela internet. Hoje pretendo fazer um tutorial sobre como obter criar um select altamente personalizado utilizando Jquery + HTML + CSS sem nenhum plugin.

O Input Select

Também conhecido como drop-down, o menu select é composto por uma lista de options que mudam o valor do select quando selecionadas.

Personalização

O Input select se comporta de maneira diferente dependendo no navegador/OS em que o usuário acessa, ele pode ter seu estilo básico (margin, fonte, borda, background…) alterado como qualquer outro input. O problema e que por ele ser diferente dependendo do navegador um estilo no chrome pode ficar diferente de um no firefox ou safari e é claro temos o IE.

Solução

Hoje existe pela internet vários plugins que ajudam na tarefa de criar um  select personalizado por exemplo:

Mas a intenção desse tutorial é mostrar como fazer a customização sem plugins, usando apenas CSS, JQuery e HTML. Então vamos trabalhar!

Select Personalizado Usando Jquery, HTML e CSS

Lógica

Partindo do fato que não temos um bom nível de personalização disponível para os Select Inputs, a idéia e criar um código que utilize componentes que temos um nível de personalização mais auto (Div, Span, Ul, Li) para criar um falso input select que manipule o input real (que vai estar escondido). O usuário final vai manipular o nosso input falso que ira reproduzir no input real.

Uma ideia que me foi passada por Daniel Barros ( Um dos monstros que trabalham comigo na Ogilvy) foi ao invés de utilizar um outro select como o input real, utilizar o input hidden, que como o nome já diz, cria um input que o usuário não vai ver. Isso simplifica ainda mais a personalização já que o código setará apenas o valor selecionado pelo usurário, no input usando o .val() do Jquery.

HTML

O código Html é bastante simples, para fins de informação a intenção desse código não é fazer um lindo input select personalizado e sim apenas a base para você criar o seu próprio input. Vamos ao código:

<form action="#" method="get">
	<div class="selectBox">
		<div class="select-atual"><span class="text">Selecione Algo</span><span class="arrow">V</span></div>
		<ul>
			<li ref="opt1">Opção 1</li>
			<li ref="opt2">Opção 2</li>
			<li ref="opt3">Opção 3</li>
		</ul>
		<input type="hidden" id="perso-select" name="select" val="">
		<input type="submit">
	</div>
</form>

 

A função de cada tag é bastante simples:

  • A div.selectBox será a nossa div principal onde tudo relacionado ao select ficará.
  • Na div.selectAtual o span.text guardará a opção selecionada atualmente, já o span.arrow será a nossa seta (Na pressa usei um V como exemplo).
  • Na div.selectBox ul ficará as opções do select, cada opção terá uma ref que agirá como o value nos options de um select box.
  • Por fim o #perso-select que vai ser o input Hidden onde setaremos o valor para envia-lo via post o get no nosso form.

CSS

.select-atual
{
	width:200px;
	height:20px;
	background-color:#ccc;
	border:1px solid;
	position:relative;
	color:#444;
	display:block;
	font-family:Arial, sans-serif;
	cursor:pointer;
	padding:5px;
}

.select-atual span.arrow
{
	color:#000;
	position:absolute;
	width:10px;
	height:10px;
	display:block;
	right:6px;
	top:6px;
}

.selectBox ul
{
	width:200px;
	background-color:#ccc;
	display:none;
	padding:10px 6px;
}

.selectBox li
{
	border-bottom:1px solid #FFF;
	font-family:Arial, sans-serif;
	font-size:12px;
	cursor:pointer;
	display:block;
	padding:5px;
}

.selectBox li:hover
{
	border-bottom:1px solid #444;
}

 

Esse é o css básico para rodar o nosso select, como você pode perceber tudo e muito simples de personalizar, você pode usar toda a liberdade que o css dá aos elementos ul, li, span e div.

JS

$(document).ready(function () {
	$('.selectBox .select-atual').toggle(abrirSelect, fecharSelect);
	$('.selectBox li').on('click', selecionarOption)
	function abrirSelect(){
		$('.selectBox ul').show()

	}
	function fecharSelect(){
		$('.selectBox ul').hide()
	}
	function selecionarOption(){
		fecharSelect()
		var option = $(this);
		var optionVal = option.attr('ref');
		$('div.select-atual span.text').text(option.text())
		option.parent('ul').siblings('#perso-select').val(optionVal)
		console.log(optionVal)
	}

});

Eu dividi o JS em 3 funções bem objetivas:

abrirSelect

A abrirSelect() faz o que o seu nome sugere, da um show() na ul que está oculta por default no CSS. Obviamente você pode usar o animete ou slideDown para fazer a abertura animada, tudo vai depender das necessidades do seu projeto.

fecharSelect

A fecharSelect() faz o inverso da abrir e é claro, você também setara animações ou outras personalizações aqui.

selecionarOption

A selecionarOption() guarda a “lógica” principal do select. Ela começa fechando o select com a fecharSelect(), depois armazena os dados do ref na var optionVal, o proximo passo ira pegar o texto da li e joga-lo no span.text seguindo de pegando o ref e jogando-o no val do nosso input hidden. E feito, agora o input#perso-select já guarda o valor selecionado no nosso input fake.

Demo

Você pode conferir o código do select personalizado funcionando aqui.

Como vocês viram criar um select personalizado é algo relativamente simples, e em vários casos usar um plugin para faze-lo pode não ser uma grande vantagem. Porém no final, apenas você pode decidir o que é melhor para o seu projeto.

Duvidas, Críticas e Sugestões nos comentários. Até a próxima.

4 comments

Post a comment

* Copy This Password *

* Type Or Paste Password Here *

14,971 Spam Comments Blocked so far by Spam Free Wordpress

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>