¿Es posible diseñar un cuadro de selección?

Tengo un cuadro de selección HTML que necesito estilo. Preferiría usar solo CSS, pero si tengo que hacerlo, usaré jQuery para completar los espacios.

¿Alguien puede recomendar un buen tutorial o plugin?

Lo sé, Google, pero he estado buscando las últimas dos horas y no encuentro nada que satisfaga mis necesidades.

Necesita ser:

  • Compatible con jQuery 1.3.2
  • Accesible
  • Discreto
  • Totalmente personalizable en términos de diseño de cada aspecto de un cuadro de selección

¿Alguien sabe algo que satisfaga mis necesidades?

He visto algunos complementos de jQuery que convierten ‘s en

    y ‘ s en

  1. , para que pueda darle estilo con CSS. No podría ser demasiado difícil de hacer tu propio.

    Aquí hay uno: https://gist.github.com/1139558 (Solía ​​estar aquí , pero parece que el sitio está caído).

    Úselo así:

     $('#myselectbox').selectbox(); 

    Estilo como este:

     div.selectbox-wrapper ul { list-style-type:none; margin:0px; padding:0px; } div.selectbox-wrapper ul li.selected { background-color: #EAF2FB; } div.selectbox-wrapper ul li.current { background-color: #CDD8E4; } div.selectbox-wrapper ul li { list-style-type:none; display:block; margin:0; padding:2px; cursor:pointer; } 

    Actualización: a partir de 2013, los dos que he visto que vale la pena verificar son:

    • Elegido – un montón de cosas interesantes, 7k + observadores en github. (mencionado por ‘un nerd pagado’ en los comentarios)
    • Select2 : inspirado en Chosen, parte de Angular-UI con un par de ajustes útiles en Chosen.

    ¡Sí!


    A partir de 2012, una de las soluciones más livianas y flexibles que he encontrado es ddSlick . Información relevante (editada) del sitio:

    • Agrega imágenes y texto para select options
    • Puede usar JSON para poblar opciones
    • Admite funciones de callback en la selección

    Y aquí hay una vista previa de los distintos modos:

    enter image description here

    En cuanto a CSS, Mozilla parece ser el más amigable, especialmente de FF 3.5+. Los navegadores Webkit solo hacen lo suyo e ignoran cualquier estilo. IE es muy limitado, aunque IE8 le permite al menos estilo de color / ancho de borde.

    Lo siguiente realmente se ve bastante bien en FF 3.5+ (seleccionando su preferencia de color, por supuesto):

     select { -moz-border-radius: 4px; -moz-box-shadow: 1px 1px 5px #cfcfcf inset; border: 1px solid #cfcfcf; vertical-align: middle; background-color: transparent; } option { background-color: #fef5e6; border-bottom: 1px solid #ebdac0; border-right: 1px solid #d6bb86; border-left: 1px solid #d6bb86; } option:hover { cursor: pointer; } 

    Pero cuando se trata de IE, tiene que deshabilitar el color de fondo en la opción si no desea que se muestre cuando el menú de opciones no se despliega. Y, como dije, webkit hace lo suyo.

    Hemos encontrado una manera simple y decente para hacer esto. Es un navegador cruzado, degradable y no rompe una publicación de formulario. Primero configure la opacidad del cuadro de selección en 0.

     .select { opacity : 0; width: 200px; height: 15px; }  

    esto es para que aún pueda hacer clic en él

    Luego haz div con las mismas dimensiones que el cuadro de selección. El div debería colocarse debajo del cuadro de selección como fondo. Usa {position: absolute} y z-index para lograr esto.

     .div { width: 200px; height: 15px; position: absolute; z-index: 0; } 
    {the text of the the current selection updated by javascript}

    Actualiza el innerHTML del div con javascript. Easypeasy con jQuery:

     $('.select').click(function(event)) { $('.div').html($('.select option:selected').val()); } 

    ¡Eso es! Solo dale estilo a tu div en lugar de a la casilla de selección. No he probado el código anterior, así que probablemente necesites ajustarlo. Pero espero que entiendas la esencia.

    Creo que esta solución supera a {-webkit-appearance: none;}. Lo que los navegadores deberían hacer a lo sumo es dictar la interacción con los elementos del formulario, pero definitivamente no cómo se muestran inicialmente en la página, ya que eso rompe el diseño del sitio.

    Aquí hay un pequeño enchufe si lo que más quieres es

    • volverse loco personalizando el estado cerrado de un elemento select
    • pero en estado abierto , favorece una mejor experiencia nativa a las opciones de selección (rueda de desplazamiento, teclas de flecha, enfoque de tabulación, modificaciones de Ajax a las options , zindex adecuado, etc.)
    • no me gusta el desordenado ul , li generadas li

    Entonces jquery.yaselect.js podría ser una mejor opción . Simplemente:

     $('select').yaselect(); 

    Y el marcado final es:

     

    Compruébalo en github.com

    Puedes personalizar hasta cierto punto con CSS en sí mismo

     select { background: red; border: 2px solid pink; } 

    Pero esto depende completamente del navegador. Algunos navegadores son tercos.

    Sin embargo, esto solo te llevará tan lejos, y no siempre se ve muy bien. Para un control completo, deberá reemplazar una selección mediante jQuery con un widget propio que emule la funcionalidad de un cuadro de selección. Asegúrese de que cuando JS esté desactivado, un cuadro de selección normal esté en su lugar. Esto permite que más usuarios usen tu formulario y ayuda con la accesibilidad.

    La mayoría de los navegadores no admiten la personalización de la etiqueta de selección usando css. Pero encuentro este javascript que se puede usar para diseñar la etiqueta de selección. Pero, como siempre, no es compatible con los navegadores IE.

    http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Noté un error en este que el atributo Onchange no funciona

    Acabo de encontrar esto que parece realmente bueno.

    http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

    Si tiene una solución sin jQuery. Un enlace donde puede ver un ejemplo de trabajo: http://www.letmaier.com/_selectbox/select_general_code.html (con más CSS)

    La sección de estilo de mi solución:

      

    Ahora el código HTML dentro de la etiqueta de cuerpo:

     
    Select one entry:

    Actualizado para 2014: no necesita jQuery para esto . Puede diseñar completamente un cuadro de selección sin jQuery con StyleSelect . Por ejemplo, dado el siguiente cuadro de selección:

      

    La ejecución de styleSelect('select.demo') crearía un cuadro de selección con estilo de la siguiente manera:

    enter image description here

    Creé el plugin jQuery, SelectBoxIt , hace un par de días. Intenta imitar el comportamiento de un cuadro de selección de HTML normal, pero también le permite modificar el estilo y animar el cuadro de selección utilizando jQueryUI. Echa un vistazo y cuéntame lo que piensas.

    http://www.selectboxit.com

    Debería intentar usar algún plugin jQuery como ikSelect .

    Traté de hacerlo muy personalizable pero fácil de usar.

    http://github.com/Igor10k/ikSelect

    Esto parece viejo pero aquí un plugin muy interesante – http://uniformjs.com

    this on usa los estilos de twitter-bootstrap para activar select en el dropdown desplegable https://github.com/silviomoreto/bootstrap-select

    La solución simple es urdir su cuadro de selección dentro de un div y diseñar el div que coincida con su diseño. Establecer opacidad: 0 para seleccionar el cuadro, hará que el cuadro de selección sea invisible. Inserte una etiqueta span con jQuery y cambie su valor dinámicamente si el usuario cambia el valor desplegable. Demostración total que se muestra en este tutorial con explicación de código. Espero que resolverá tu problema.

    JQuery Code tiene un aspecto similar a esto.