Algunas clases css importantes para personalizar el plugin Chosen

El plugin para jquery Chosen es utilizado para cambiar la apariencia y funcionalidad de los aburridos select que vienen por defecto en los navegadores. Pero algunas veces su apariencia no se acopla del todo al estilo generar que tenemos en nuestra aplicacion, por ejemplo, cuando lo usamos junto a Twitter Bootstrap. Aqui dejo algunas clases para poder modificar su apariencia:

Modificar altura:

.chosen-container-single .chosen-single {
height: 32px !important;
padding: 4px 0 0 10px !important;
}

Modificar la imagen de despliege:

.chosen-container-single .chosen-single div {
padding-top: 4px;
}

Modificar color de seleccion:

.chosen-container .chosen-results li.highlighted {
background-color: #AF2D27;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #AF2D27), color-stop(90%, #AF2D27));
background-image: -webkit-linear-gradient(#AF2D27 20%, #AF2D27 90%);
background-image: -moz-linear-gradient(#AF2D27 20%, #AF2D27 90%);
background-image: -o-linear-gradient(#AF2D27 20%, #AF2D27 90%);
background-image: linear-gradient(#AF2D27 20%, #AF2D27 90%);
color: #fff;
}

Estas clases son para un select de una sola seleccion, para modificar las de multiple seleccion se utiliza “.chosen-container-multi”.

Esta entrada fue publicada en Uncategorized y etiquetada . Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s