¿Es posible darle estilo a un cuadro de selección?

Question

Tengo un cuadro de selección de 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.

tiene que ser:

• compatible con jQuery 1.3.2
• accesible
• discreto
• completamente personalizable en términos de estilo todos los aspectos de una caja de selección

¿Alguien sabe algo que satisfaga mis necesidades?

Answer 1

he visto algunos plugins jQuery que hay que convierten <select> 's a <ol>' s 'y <option> s a <li>' s, de modo que usted puede estilo con CSS. No podría ser demasiado difícil de hacer tu propio.

Aquí hay una: https://gist.github.com/1139558 (Se utiliza para que here, pero parece que el sitio está abajo.)

utilizar de esta manera:

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

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

Answer 2

puede estilo en cierta medida con CSS por sí mismo

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

Pero esto es totalmente hasta el navegador. Algunos navegadores son tercos.

Sin embargo, esto solo lo 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 3

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.

El siguiente en realidad se ve bastante agradable en FF 3.5 + (la selección de 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, hay que desactivar el color de fondo en la opción si no quiero que se muestre cuando el menú de opciones no se baja. Y, como dije, webkit hace lo suyo.

Answer 4

La mayoría de los exploradores no admiten la personalización de la etiqueta de selección mediante 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/ me di cuenta de un error en este atributo onchange que dosen't de trabajo

Answer 5

He aquí un pequeño tapón de si la mayoría quiere

• volverse loco personalizar 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 flechas, tabulación, ajax modificaciones a options, zindex adecuada, etc.)
• no les gusta los desordenados ul, li marcas generadas

Entonces jquery.yaselect.js could be a better fit. Simplemente:

$('select').yaselect(); 

Y la final marcado es:

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

comprobarlo en github.com

Answer 6

solo he encontrado este que parece realmente bueno.

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

Answer 7

Hemos encontrado una manera sencilla y decente para hacer esto. Es un navegador cruzado, degradable y no rompe una publicación de formulario. En primer lugar establecer la opacidad de la caja de selección a 0.

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

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

esto es por lo que aún puede hacer clic en él

Entonces 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 de div con javascript. Easypeasy con jQuery:

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

Eso es todo! 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

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

Answer 9

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

He intentado que sea muy personalizable pero fácil de usar.

http://github.com/Igor10k/ikSelect

Answer 10

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

Answer 11

Actualización: A partir de 2013 los dos que he visto que merece la pena son:

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

Sí!

---

A partir de 2012 una de las soluciones más ligeras y flexibles que he encontrado es ddSlick. Relevante (editado) información desde el sitio:

• Añade imágenes y texto a select options
• puede utilizar JSON para poblar opciones
• compatible con las funciones de devolución de llamada de la selección

Y es una vista previa del aquí diversos modos:

Answer 12

en este utiliza los estilos twitter-bootstrap convertir select en dropdown menú https://github.com/silviomoreto/bootstrap-select

Answer 13

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

La sección 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 del cuerpo de la etiqueta:

<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 14

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. 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. La demostración total se muestra en in this tutorial con la explicación del código. Espero que resolverá tu problema.

El código de JQuery es 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 15

Actualización de 2014: No es necesario jQuery para este. Puede diseñar completamente un cuadro de selección sin jQuery usando StyleSelect.Por ejemplo, da la siguiente caja 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> 

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