En múltiples ocasiones nos hemos visto en la necesidad, ya sea por cuestiones estéticas o por cuestiones prácticas, de crear un campo de tipo 'select' personalizado.
Chrome, el gran navegador de
Google, ocasionalmente no muestra de forma correcta estos campos, sobretodo si son muy largos. En este
tutorial os traigo una manera sencilla y completamente personalizable de crear este tipo de campos utilizando las listas de
HTML,
CSS3 y
jQuery.
El código HTML
Código :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Select con HTML, CSS y jQuery</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="assets/js/jquery.min.js"></script> <script type="text/javascript" src="assets/js/script.js"></script> <link href="assets/css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <ul id="tld_r_ul"> <li title=".com">.com</li> <li title=".net">.net</li> <li title=".org">.org</li> <li title=".biz">.biz</li> <li title=".es">.es</li> <li title=".co.uk">.co.uk</li> <li title=".com.ar">.com.ar</li> <li title=".us">.us</li> <li title=".eu">.eu</li> <li title=".xxx">.xxx</li> </ul> <form id="domainForm"> <div id="input_box"> <input type="text" name="nombre" id="input_id"/> </div> <div class="option"> <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div> <input id="tld_field" type="hidden" name="tld" value=""/> </div> <div style="clear:both"></div> <input type="button" value="Enviar" id="boton"/> </form> </div> </body> </html>
Paso a explicar las partes importantes por fragmentos. La primera sección a tener en cuenta es:
Código :
<ul id="tld_r_ul"> <li title=".com">.com</li> <li title=".net">.net</li> <li title=".org">.org</li> <li title=".biz">.biz</li> <li title=".es">.es</li> <li title=".co.uk">.co.uk</li> <li title=".com.ar">.com.ar</li> <li title=".us">.us</li> <li title=".eu">.eu</li> <li title=".xxx">.xxx</li> </ul>
En este fragmento de HTML definimos la lista que vamos a mostrar en nuestro 'select' personalizado. Como podéis comprobar, es una lista normal con la única característica especial que es el atributo 'title' en cada uno de los elementos de la lista. Seguidamente, la sección del formulario, a la que he añadido unas capas para personalizar un poco más el diseño:
Código :
<form id="domainForm"> <div id="input_box"> <input type="text" name="nombre" id="input_id"/> </div> <div class="option"> <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div> <input id="tld_field" type="hidden" name="tld" value=""/> </div> <div style="clear:both"></div> <input type="button" value="Enviar" id="boton"/> </form>
Aquí nos centraremos especialmente en la sección:
Código :
<div class="option"> <div class="tld_static" id="reg"><p id="tld_p_reg">.com</p></div> <input id="tld_field" type="hidden" name="tld" value=""/> </div>
Vemos que nuestro 'select' no es más que una div con un texto en el que está escrito
el contenido del primer elemento de nuestra lista. Posteriormente, hemos creado un campo tipo 'hidden' donde guardaremos el valor que el visitante seleccione de nuestro formulario.
jQuery
Utilizamos jQuery para este tip por su sencillez de uso. Podemos utilizar cualquier otro framework que nos guste e incluso
javascript puro y duro.
Os presento el código y luego los comentamos:
Código :
jQuery.noConflict(); jQuery(document).ready(function(){ var first=jQuery("#tld_r_ul li:first").attr("title"); jQuery("#tld_field").val(first); jQuery("#reg").click(function(){ jQuery("#tld_r_ul").css('top','39px'); jQuery("#tld_r_ul").css('left','222px'); jQuery("#tld_r_ul").toggle(200); }); jQuery("#tld_r_ul li").click(function(){ var tld=jQuery(this).attr("title"); jQuery("#tld_field").val(tld); jQuery("#tld_p_reg").html(tld); jQuery("#tld_r_ul").toggle(200); }); jQuery("#boton").click(function(){ alert(jQuery("#input_id").val()+jQuery("#tld_field").val()); }); }) Estamos usando jQuery.noConflict() porque en nuestra web usamos otras bibliotecas y así evitamos el conflicto que puede suponer usar la variable '$'.
Primera sección importante:
Código :
jQuery(document).ready(function(){ // Esperamos a que el documento esté listo var first=jQuery("#tld_r_ul li:first").attr("title"); jQuery("#tld_field").val(first); Como ya sabéis, utilizamos la función ready() de jQuery para que no se empiece a ejecutar el código haste que el DOM no esté terminado de cargar. Las dos líneas siguientes tienen la función de leer el título del primer elemento de nuestra lista y cargar en el campo 'hidden' su valor.
Código :
jQuery("#reg").click(function(){ jQuery("#tld_r_ul").css('top','39px'); jQuery("#tld_r_ul").css('left','222px'); jQuery("#tld_r_ul").toggle(200); }); Esta función espera el 'click' sobre nuestro 'select'. Una vez que nuestro visitante pincha sobre él, nuestra lista se coloca en la posición definida por la función css() y muestra la lista con toggle(). Si queréis saber más sobre la función toggle() os dejo el enlace:
http://api.jquery.com/toggle/.
En la siguiente sección de código se asignan las propiedades a cada uno de los elementos de la lista:
Código :
jQuery("#tld_r_ul li").click(function(){ // Cuando haga 'click' var tld=jQuery(this).attr("title"); // tomamos el valor del atributo title del elemento clickeado jQuery("#tld_field").val(tld); // asignamos el valor al campo oculto jQuery("#tld_p_reg").html(tld); // y asignamos el valor al elemento <p> jQuery("#tld_r_ul").toggle(200); //hacemos desaparecer la lista }); Para terminar con la sección de jQuery, le doy la función al botón 'envíar'. En este caso únicamente he puesto un 'alert' para mostrar que está recibiendo los valores correctamente:
Código :
jQuery("#boton").click(function(){ alert(jQuery("#input_id").val()+jQuery("#tld_field").val()); }); CSS3
Para terminar, el estilo. El CSS que os proponemos a continuación no es más que lo que estamos usando en el ejemplo. Respetando algunas reglas importantes, el resto será totalmente de vuestra elección:
Código :
div#wrapper { position:relative; margin:20px auto; padding:20px; width:400px; height:200px; border:1px solid black; } div#input_box { float:left; height:32px; width:200px; border:1px solid #ccc; margin-top:5px; } input#input_id { border:0; height:95%; width:100%; } div.tld_static{ float:left; width:140px; height:32px; margin-top:5px; font-size:1.7em; text-indent:10px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 0px; -webkit-border-radius: 0px 5px 0px 4px; border-radius: 0 4px 4px 0; border:1px #CCC solid; cursor:pointer; background: url(../images/select.jpg) right top no-repeat; } div.tld_static p{ padding:0; margin:0; } ul#tld_r_ul { display:none; background-color: #FFFFFF; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; font-size: 20px; height: 150px; list-style: none outside none; overflow-x: hidden; overflow-y: scroll; position: absolute; width: 163px; z-index:10000; box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5) ; -webkit-box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.5) ; padding-left:5px; } ul#tld_r_ul li { display:block; cursor:pointer; } ul#tld_r_ul li:hover { color:#fff; background-color:#B03336; } Comentemos las líneas más importantes (hemos eliminado algunas líneas superfluas):
Código :
div.tld_static{ cursor:pointer; //Con esta regla mostramos la 'mano' en lugar de la flecha del ratón background: url(../images/select.jpg) right top no-repeat; // Esta es la imagen de la flecha típica del 'select' que hemos rediseñado para nuestro formulario. } ul#tld_r_ul { display:none; //nuestra lista estará oculta hasta que se le llame height: 150px; // Definimos una altura máxima (opción estética) list-style: none outside none; // Definimos el estilo de la lista a nuestro gusto (hemos quitado los puntos) overflow-x: hidden; //Ocultamos el scroll horizontal overflow-y: scroll; //Permitimos el scroll vertical position: absolute; // Importante, posición absoluta dentro de nuestro wrapper, que tiene posición relativa. width: 163px; // La anchura puede ser automática. Nosotros la dejamos así por estética z-index:10000; // Importante, que no vaya a quedar nuestra lista debajo de ninguna capa } Si queréis ver funcionando este 'select' podéis hacerlo en:
http://blog.idaruma.com/tips/jqueryPara descargar los archivos:
select_jquery.zip
