Hoy os traigo una forma de customizar vuestros selects de una manera rápida y sencilla. Una de las grandes deficiencias de HTML 4 es la imposibilidad de customizar los selects y su flecha, por tanto os traigo una forma sencilla de poder hacerlo.
La idea es simular el funcionamiento de un select, que realice las mismas funciones que el select original. Pero, como hacemos para que al enviar el formulario también se envíe los datos de ese select. Pues la solucion es muy sencilla, mantenemos el select orignal oculto y a la vez que cambiamos el valor del select customizado cambiamos el valor del select oculto. La idea es simple y su implementación igual de sencilla.
Para realizar todo esto utilizaremos un código HTML muy sencillo:
<html> <head> <link rel="stylesheet" type="text/css" href="moviles.css" media="all" /> <script src="jquery.js" type="text/javascript"></script> <script src="misfunciones.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form> <select id="Inicio_idProvincia"> <option value="1">Aviles</option> <option value="2">Oviedo</option> <option value="3">Gijón</option> </select> </form> </body> </html>
Ahora añadimos el código javascript para sustituir el select original por el customizado y que al ir variando los valores del customizado se cambien automáticamente en el original para que luego se envíen a través del <form>.
jQuery(document).ready(
function() {
var ulprovincias="";
$("#Inicio_idProvincia option").each(function(){
ulprovincias +="<li value="+$(this).attr('value')+">"+ $(this).text() + "</li>";
});
$('#Inicio_idProvincia').css('display','none');
$('#Inicio_idProvincia').parent().prepend("<ul
class='custom-options-provincias'>" + ulprovincias + "</ul>");
$('#Inicio_idProvincia').parent().prepend("<div
class='custom-select-provincias'></div>");
$('.custom-select-provincias').click(function(){
$('.custom-options-recursos').slideUp('fast');
if ($('.custom-options-provincias').css('display')=='none'){
$('.custom-options-provincias').slideDown('fast');}
else{
$('.custom-options-provincias').slideUp('fast');
}
});
$('.custom-options-provincias li').click(function(){
$('.custom-select-provincias').html($(this).text());
$('#Inicio_idProvincia').attr('value',$(this).attr('value'));
$('.custom-options-provincias').slideUp('fast');
});
});
Por último le damos los estilos con css, y añadimos la imagen del select customizado:
.custom-select-provincias{
background:url("./images/select.png") no-repeat scroll left top transparent;
border:0 none;
height:2.7em;
margin-left:0.5em;
padding-left:0.7em;
padding-top:0.6em;
width:14em;
cursor:pointer;
}
.custom-options-provincias{
background:none repeat scroll 0 0 #FFFFFF;
border-bottom:3px solid #DCDADA;
border-left:3px solid #DCDADA;
border-right:3px solid #DCDADA;
display:none;
margin-left:0.7em;
margin-top:-0.9em;
min-width:12.6em;
padding-left:0.5em;
padding-top:0.3em;
position:absolute;
}
.custom-options-provincias li{
margin-left:-0.5em;
padding-left:0.5em;
list-style:none;
}
.custom-options-provincias li:hover{
cursor:pointer;
background:#DCDADA;
width:100%;
color:#ffffff;
}
Para adaptarlo a vuestras necesidades es tan simple como cambiar los ids o class que necesiteis, y sustituir la imagen original de mi select custom porque la que vosotros querais.
Podeis descargaros el código desde aquí.
Espero que esto os haya solucionado una de los grandes problemas que se encuentran los desarrolladores web a la hora de enfrentarse al cambio de estilos de los selects.
Para cualquier duda o consulta podeis enviarme un mail.