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


145

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?


66
quieres decir que quieres un menú desplegable personalizable (integrado en jquery), ¿verdad? porque cajas de selección no son incluso objetos del navegador (que son objetos de la plataforma), muy simple, muy crudo, y no se puede estilo de gran parte de ella (no se puede estilo de las fronteras, por ejemplo)
Ayyash

¡+1 para una buena explicación y formato!
Manish

66
Vale la pena mencionar a Elegido, pero no es muy personalizable y tiene muchos problemas abiertos. Aunque es agradable de ver y usar.
un nerd pagado el

1
@Ayyash Lo que estás diciendo es cierto para MSHTML (Internet Explorer y amigos) y WebCore (Safari) en algunos sistemas (ciertamente Mac OS). No es cierto para Gecko (Firefox y amigos). Por lo tanto, el problema real es que no puede diseñar selectelementos entre navegadores. Pero si las personas están dispuestas a vivir con las diferencias, puede diseñarlas, incluidas las fronteras.
PointedEars

1
@PointedEras sí, en 2012 sí pueden, pero supongo que eso fue hace 3 años cuando dije lo que dije, estoy bastante seguro de que le di una oportunidad en ese momento y no funcionó
Ayyash

Respuestas:


45

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

Intenté esta versión inicialmente, pero el DIV no está posicionado en relación con el cuadro de selección. En cambio, se coloca con fuerza a la izquierda.

No he usado esto yo mismo. La demostración ( brainfault.com/demo/selectbox/0.5 ) se ve bien. Busque otras implementaciones. Sé que he visto varios otros complementos que hacen esto.
Mark A. Nicolosi el

1
Intenté esto y funcionó por un tiempo hasta que tuve que poner más de uno en la página. Ahora es difícil de diseñar porque, por alguna estúpida razón, el autor pensó que estaba bien usar la misma ID para todos los elementos en lugar de ID o clases únicas. Ahora estoy pensando en escribir el mío ...
Jonathan

19
404: ¿alguna idea de dónde había espejos?
Moak

2
Solo tenga en cuenta que la mayoría de los complementos de menú seleccionados no son accesibles para los lectores de pantalla. Todavía no he encontrado uno que funcione.
Marcy Sutton el

18

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:

ingrese la descripción de la imagen aquí


14

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.


11

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.


10

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


es increíble y también funciona en dispositivos móviles :)
ovejas voladoras

Funciona en iOS. lo siento, no tengo acceso a android, etc.
Choonkeat

1
eso no era una pregunta, era un elogio. se hace bien el trabajo en mi androide.
ovejas voladoras

5

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.


4

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



2

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>

Proporcione un ejemplo en lugar de simplemente vincularlo a uno.
Todos los trabajadores son esenciales

Cambié mi respuesta como lo solicitaste.
Christoph Letmaier

1
Se ve mucho mejor ahora. Por cierto, no hay nada de malo en vincular a un ejemplo de trabajo o una fuente que muestra un ejemplo (puede ser bastante útil). Pero inevitablemente los enlaces se vuelven inválidos con el tiempo, por lo que se desea proporcionar siempre la información necesaria en la respuesta (que usted proporcionó) incluso cuando se proporcionan enlaces útiles.
Todos los trabajadores son esenciales

Ok, entendido ... :-) Haré todo lo posible para mantener vivo el enlace ...
Christoph Letmaier

2

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:

ingrese la descripción de la imagen aquí


Nota al
margen

1

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





-1

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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.