Elegant Selects com Quick[select]

Os elementos de formulário sempre permitiram um estilo limitado… e é por isso que odeio trabalhar com exibição de formulários. E comecei quando os elementos de formulário eram praticamente impossíveis de estilizar, na época do Internet Explorer 4. É claro que percorremos um longo caminho, mas há um elemento que ainda é um pouco difícil de estilizar e não é particularmente elegante: SELECT. O elemento tem uma aparência diferente de sistema operacional para sistema operacional e, às vezes, até de navegador para navegador, o que não é o ideal.

Recentemente, encontrei um plug-in jQuery incrível para fazer o SELECT mais apresentável, elegante e estiloso: Rápido[select]. Rápido[select] vira SELECT em botões clicáveis com um botão tradicional de SELECT tradicional como alternativa.

O CSS

Rápido[select] vem com uma folha de estilo básica, mas o senhor pode estilizar a opção “buttons” da maneira que desejar, como pode ver na minha demonstração. Aqui estão meus estilos básicos:

.btn-group .btn {
	border: 1px solid #ccc;
	background: #eee;
	padding: 4px;
	border-radius: 4px;
	margin: 0 10px 0 0;
	font-size: 14px;
	display: inline;

	transition: background .3s, border-color .3s;
}
.btn-group .btn.active {
	background: #7ac9ed;
	border-color: #0c7bb6;
}

Rápido[select] também tem um auxiliar para sites orientados por bootstrapped, se esse for o seu caso.

O JavaScript

Usando o Quick[select] é fácil: adicione o plug-in à página e, em seguida, use a sintaxe do plug-in jQuery para criar instâncias para determinado SELECT elementos:

jQuery('#wakeup-time').quickselect({
	activeButtonClass: 'btn-primary active',
	breakOutValues: ['06:30', '07:00', '07:30', '08:00'],
	buttonClass: 'btn btn-default',
	selectDefaultText: 'Other',
	wrapperClass: 'btn-group'
});

A opção mais importante é breakOutValues que gera botões clicáveis para escolhas populares (especificadas pelo senhor) dentro do SELECT . O senhor também deve definir um selectDefaultText personalizado para quando o botão que aciona a exibição completa das opções.

Rápido[select] é o melhor SELECT que já vi em um bom tempo. Esse plug-in permite que o usuário tenha um visual elegante, estiloso e utilizável SELECT elegantes, estilosos e utilizáveis. Dê uma olhada nele e faça um favor aos seus usuários!