Comunidad de diseño web y desarrollo en internet online

Crear un campo 'select' personalizado con CSS3 y jQuery

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/jquery
Para descargar los archivos: select_jquery.zip

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate