Bienvenid@s, hoy os mostraré como crear vuestros propios campos select a partir de una lista "ul" sin necesidad de recurrir al clásico select html, esta opción puede ser una buena idea si quieres adaptar el select al diseño de la web y excluir el diseño obsoleto que te ofrece de por sí el campo select html.
Para conseguir un campo select con Jquery y CSS3 no es necesario mucho código, como podréis ver en el ejemplo, únicamente es necesario entrelazar bien los estilos CSS de las clases y darle dinamismo con Jquery para realizar las tareas que haría un clásico select.
<!--SELECT--> <ul id="select" class="select-group"> <li class="select-box"></li> <li value="1" class="select-selected">Uno</li> <li value="2">Dos</li> <li value="3">Tres</li> <li value="4">Cuatro</li> <li value="5">Cinco</li> <li value="6">Seis</li> <li value="7">Siete</li> <li value="8">Ocho</li> <li value="9">Nueve</li> </ul> <!--SELECT-->
Ahí podéis ver una lista html, la clase "select-group" es la clase principal y es la que contiene prácticamente casi todo el diseño del campo select, otra clase importante es "select-box", esta clase es independiente y es la base del campo select, es decir es el box donde se mostrará la opción seleccionada, la clase "select-selected" hace la función de "selected" de un "option" de un campo "select", el atributo value al igual que un option contiene el valor de dicha opción, que posteriormente es manejada con Jquery.
Jquery es el encargado de detectar el evento click y pasar el valor de la opción por ejemplo a un campo oculto dentro de un formulario, es decir, esa opción seleccionada podrá ser enviada junto a un formulario.
A continuación puedes ver una DEMOSTRACIÓN ...
Y a continuación el código de ejemplo ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Como crear un campo select con Jquery y CSS3</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$(".select-group li.select-box").html($(".select-group li.select-selected").text() + "<div class='icon-select'></div>");
$("#select-value").text($(".select-group li.select-selected").attr("value"));
$(".select-group li").bind("click", function(){
$(".select-group li.select-box").html($(this).text() + "<div class='icon-select'></div>");
$("#select-value").text($(this).attr("value"));
});
});
</script>
<style>
#select{width: 250px;}
.select-group
{
position: absolute;
}
.select-group li
{
display: none;
list-style: none;
border-left: 1px solid #DBE1EB;
border-right: 1px solid #DBE1EB;
border-bottom: 1px solid #DBE1EB;
font-size: 16px;
font-family: Arial, Verdana;
padding-left: 7px;
padding-right: 7px;
padding-top: 5px;
padding-bottom: 5px;
border-radius: 4px;
background: #454F6F;
background: linear-gradient(top, #454F6F, #5D6684);
background: -moz-linear-gradient(top, #454F6F, #5D6684);
background: -webkit-linear-gradient(top, #454F6F, #5D6684);
background: -o-linear-gradient(top, #454F6F, #5D6684);
color: #FFFFFF;
}
.select-group li.select-box
{
background: #FFFFFF;
border: 1px solid #DBE1EB;
color: #8A92AA;
display: block;
}
.select-group li.select-box:hover
{
background: #FFFFFF;
color: #8A92AA;
border: 1px solid yellow;
}
.select-group:hover > li
{
cursor: pointer;
display: block;
}
.select-group li:hover
{
background: #8A92AA;
background: linear-gradient(top, #8A92AA, #A1A7BC);
background: -moz-linear-gradient(top, #8A92AA, #A1A7BC);
background: -webkit-linear-gradient(top, #8A92AA, #A1A7BC);
background: -o-linear-gradient(top, #8A92AA, #A1A7BC);
}
.icon-select
{
float: right;
width: 18px;
height: 18px;
background-image: url(flecha.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>Implementando un campo select con Jquery y CSS3</h1>
<h3>By <a href="http://jquery-manual.blogspot.com" target="_blank">http://jquery-manual.blogspot.com</a></h3>
<!--SELECT-->
<div id="select">
<ul class="select-group">
<li class="select-box"></li>
<li value="1" class="select-selected">Uno</li>
<li value="2">Dos</li>
<li value="3">Tres</li>
<li value="4">Cuatro</li>
<li value="5">Cinco</li>
<li value="6">Seis</li>
<li value="7">Siete</li>
<li value="8">Ocho</li>
<li value="9">Nueve</li>
</ul>
</div>
<!--SELECT-->
<br /><br /><br />
Valor de la opción seleccionada:
<span id="select-value"></span>
</body>
</html>
No hay comentarios:
Publicar un comentario