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

select2

Question

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?

Answer 1

Acabo de encontrar esto que parece realmente bueno.

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

Answer 2

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:

<div class="yaselect-wrap">
  <div class="yaselect-current"><!-- current selection --></div>
</div>
<select class="yaselect-select" size="5">
  <!-- your option tags -->
</select>

Compruébalo en github.com

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

He visto algunos complementos de jQuery que convierten <select> ''s en <ol> y <option> '' s en <li> , 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 here , 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;
}

Answer 7

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;
}

<select class=''select''>
    <option value=''foo''>bar</option>    
</select>

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;
}

<div class=''.div''>{the text of the the current selection updated by javascript}</div>
<select class=''select''>
    <option value=''foo''>bar</option>    
</select>

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.

Answer 8

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

Answer 9

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.

 <script>
   $(document).ready(function(){
     $(''.dropdown_menu'').each(function(){
       var baseData = $(this).find("select option:selected").html();
       $(this).prepend("<span>" + baseData + "</span>");
     });

     $(".dropdown_menu select").change(function(e){
       var nodeOne = $(this).val();
       var currentNode = $(this).find("option[value=''"+ nodeOne +"'']").text();
       $(this).parents(".dropdown_menu").find("span").text(currentNode);
     });
   });
</script>

Answer 10

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.

Answer 11

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:

<style>
#container { margin: 10px; padding: 5px; background: #E7E7E7; width: 300px; background: #ededed); }
#ul1 { display: none; list-style-type: none; list-style-position: outside; margin: 0px; padding: 0px; }
#container a {  color: #333333; text-decoration: none; }
#container ul li {  padding: 3px;   padding-left: 0px;  border-bottom: 1px solid #aaa;  font-size: 0.8em; cursor: pointer; }
#container ul li:hover { background: #f5f4f4; }
</style>

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

<form>
<div id="container" onMouseOver="document.getElementById(''ul1'').style.display = ''block'';" onMouseOut="document.getElementById(''ul1'').style.display = ''none'';">
Select one entry: <input name="entrytext" type="text" disabled readonly>
<ul id="ul1">
    <li onClick="document.forms[0].elements[''entrytext''].value=''Entry 1''; document.getElementById(''ul1'').style.display = ''none'';"><a href="#">Entry 1</a></li>
    <li onClick="document.forms[0].elements[''entrytext''].value=''Entry 2''; document.getElementById(''ul1'').style.display = ''none'';"><a href="#">Entry 2</a></li>
    <li onClick="document.forms[0].elements[''entrytext''].value=''Entry 3''; document.getElementById(''ul1'').style.display = ''none'';"><a href="#">Entry 3</a></li>
</ul>
</div>
</form>

Answer 12

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

Answer 13

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

• Chosen - 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 devolución de llamada en la selección

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

Answer 14

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

<select class="demo">
  <option value="value1">Label 1</option>
  <option value="value2" selected>Label 2</option>
  <option value="value3">Label 3</option>
</select>

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

Answer 15

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