viernes, 3 de febrero de 2012

input select con estilo e imágen con jQuery

Una opción para modificar el aspecto de los aburridos select de los formularios de nuestras Webs, es mediante el plugin jquery que os voy a presentar.


Para la utilización de este plugin tendremos, en primer lugar, que cargar la librería jquery y el fichero del plugin entre las etiquetas head de nuestro archivo. Puedes descargar el plugin pinchando en: descargar jquery.select.js.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.select.js"></script>

A continuación la llamada al plugin:
<script>
      $(document).ready(function(){
          $('select').customStyle();
      })
</script>

De esta forma, estamos aplicando el plugin a todos los select de la página. Tambien deberemos aplicar algunos estilos ya que el plugin lo que hace es encapsular las etiquetas select dentro de etiquetas span para aplicarles el aspecto deseado:
.customStyleSelectBox {
/* Styles For Your Select Box */
}

.customStyleSelectBox.changed {
/* You can use this if you want a different style after user has made a selection */
}

/* on the next line we add a down arrow on the right to indicate that it is a select box */
.customStyleSelectBoxInner {
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    padding: 3px 3px 3px 10px;
    background:url(arrow.gif) no-repeat center right #FFF;
}

A continuación un ejemplo en funcionamiento:

1 comentario :

  1. saludos podrias hacer un tutorial de como insertar un contenido en una web con php, en mi caso tengo una pagina web y a diario necesito introducir full contenido y estar modificando en el html es tedioso. gracias por los aportes

    ResponderEliminar