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

Tengo un cuadro de selección HTML que necesito diseñar. Preferiría usar solo CSS, pero si es necesario, usaré jQuery para llenar los vacíos.

¿Alguien puede recomendar un buen tutorial o complemento?

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
• Completamente 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 <select>'s en <ol>' sy <option>'s en <li>' s, para que pueda diseñarlo con CSS. No podría ser demasiado difícil rodar el tuyo.

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

Úselo así:

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

Dale estilo así:

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 consultar son:

• Elegido : un montón de cosas geniales, más de 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.

¡Si!

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

• Agrega imágenes y texto a select options
• Puede usar JSON para completar opciones
• Admite funciones de devolución de llamada en la selección

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

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

Lo siguiente en realidad 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, debe deshabilitar el color de fondo de la opción si no desea que se muestre cuando no se despliegue el menú de opciones. Y, como dije, webkit hace lo suyo.

Hemos encontrado una manera simple y decente de hacer esto. Es cross-browser, degradable y no rompe una publicación de formulario. Primero establezca 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 puedas hacer clic en él

Luego haga div con las mismas dimensiones que el cuadro de selección. El div debe estar debajo del cuadro de selección como fondo. Use {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>

Actualice innerHTML del div con javascript. Easypeasy con jQuery:

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

¡Eso es! Simplemente diseñe su div en lugar del cuadro de selección. No he probado el código anterior, por lo que probablemente necesites modificarlo. Pero espero que entiendas lo esencial.

Creo que esta solución supera {-webkit-apariencia: ninguno;}. 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 en su mayoría quiere

• volverse loco personalizando el estado cerrado de un selectelemento
• 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 ajax options, zindex adecuado, etc.)
• no me gusta el marcado desordenado ul, ligenerado

Entonces jquery.yaselect.js podría ser mejor . 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

Puedes diseñar hasta cierto punto con CSS solo

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

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

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

La mayoría de los navegadores no admiten la personalización de la etiqueta select usando CSS. Pero encuentro este javascript que se puede usar para diseñar la etiqueta de selección. Pero como de costumbre, no hay soporte para navegadores IE.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ Noté un error en esto 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 (diseñado 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 del 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>

Actualizado para 2014: no necesita jQuery para esto . Puede diseñar completamente un cuadro de selección sin jQuery usando 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 styleSelect('select.demo')crearía un cuadro de selección con el siguiente estilo:

Creé el complemento jQuery, SelectBoxIt , hace un par de días. Intenta imitar el comportamiento de un cuadro de selección HTML normal, pero también le permite diseñar y animar el cuadro de selección utilizando jQueryUI. Echa un vistazo y hazme saber lo que piensas.

http://www.selectboxit.com

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

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

http://github.com/Igor10k/ikSelect

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

esto en los usos twitter-bootstrapestilos para girar selecten el dropdownmenú https://github.com/silviomoreto/bootstrap-select

La solución simple es deformar su cuadro de selección dentro de un div y diseñar el div que coincida con su diseño. Establezca la opacidad: 0 en el cuadro de selección, 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 resuelva tu problema.

JQuery Code se parece 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>