Diseño CSS de selección: use la propiedad de apariencia

¡Atención! Se ha detenido el desarrollo y soporte del complemento debido a que ahora forma parte de .

Una de las cosas más desagradables (y yo diría incluso terribles) en el desarrollo web es el diseño de formularios HTML. Desafortunadamente, no existe un estándar único para mostrar elementos de formulario, independientemente del navegador y el sistema operativo, del mismo modo que no hay forma de personalizar algunos de estos elementos utilizando hojas de estilo en cascada.

A los siguientes elementos de formulario HTML no se les puede aplicar un estilo completo:

• lista desplegable;
• casilla de verificación;
• cambiar .
• Campo para enviar un archivo.

Como ya se desprende del título del post, aquí solo hablaremos de selectos.

Existen muchas soluciones listas para usar en forma de complementos de jQuery para diseñar listas desplegables. Pero yo (debido al hecho de que ninguno de los complementos me convenía por una razón u otra) decidí reinventar mi propia rueda y escribí mi propio complemento, que comparto en este artículo.

Me gustaría señalar de inmediato que este complemento no es adecuado para todos los casos posibles de uso de selecciones (lea las desventajas).

Demostración del complemento

Puedes ver un ejemplo de estilo de selector usando mi complemento. Los diseñé sin usar imágenes.

Ventajas

• Cuando JavaScript está deshabilitado, se muestran selectores estándar.
• El script es de tamaño pequeño, aproximadamente 4 kilobytes.
• Funciona en IE6+ y todos los navegadores de escritorio modernos.
• Se muestra en línea.
• Diseñado fácilmente con CSS.
• Le permite establecer la altura máxima para la lista desplegable (propiedad CSS altura máxima).
• Ajusta automáticamente el ancho si no se especifica.
• Admite el desplazamiento de la rueda del mouse.
• Tiene “posicionamiento inteligente”, es decir. no va más allá de la parte visible de la página al abrir la lista.
• Puede "captar" presionando la tecla Tab y cambiar con las flechas del teclado.
• Admite el atributo "deshabilitado".
• También funciona con selecciones agregadas/cambiadas dinámicamente.

Defectos

• No admite el atributo múltiple, es decir. no permite seleccionar múltiples elementos (selección múltiple).
• No admite la agrupación de elementos de la lista (etiqueta).
• No admite el cambio con las flechas del teclado cuando la lista se abre haciendo clic con el mouse.

Descargar

El complemento no está disponible porque ya no es relevante.

Complemento jQuery “SelectBox Styler”

Versión: 1.0.1 | Descargas: 11103 | Tamaño: 7 KB | Última actualización: 07/10/2012

Actualizaciones 22/09/2012 Convirtió el script en un complemento (incluida una versión minimizada) y también agregó soporte para agregar/cambiar selecciones dinámicamente. 07/10/2012 Se corrigió el comportamiento del script al usar el método onchange de la etiqueta. Conectando el complemento

Si el sitio aún no tiene jQuery habilitado, agregue la siguiente línea antes de la etiqueta:

Inmediatamente después de jQuery, incluya el archivo con el script:

(función ($) ( $(función() ($("select").selectbox(); )) ))(jQuery)

Coloque este código antes de la etiqueta después de los archivos anteriores.

Al cambiar las selecciones dinámicamente, debe activar el activador de actualización, por ejemplo:

(función ($) ($(función() ($("botón").hacer clic(función() ($("seleccionar").find("opción:nth-child(5)").attr("seleccionado) ", verdadero); $("select").trigger("actualizar"); )) )) ))(jQuery)

Código HTML después de la ejecución del complemento.

Su estructura se ve así:

-- Seleccionar --

• -- Seleccionar --
• Punto 1
• Punto 2
• Punto 3

-- Seleccionar -- Artículo 1 Artículo 2 Artículo 3

Clases CSS utilizadas para diseñar el selector.

Para diseñar selectores usando CSS, use las siguientes clases:

.cuadro de selección	contenedor principal para toda la selección
.selectbox .select	seleccionar en estado colapsado
.selectbox.focused .select	centrarse en seleccionar cuando se presiona la tecla Tab
.selectbox .select .texto	etiqueta anidada para una selección contraída en caso de insertar una imagen de fondo usando la técnica de “puerta corredera”
.selectbox .trigger	lado derecho de la selección contraída (interruptor condicional)
.selectbox .trigger .flecha	subetiqueta para botón de opción (flecha)
.selectbox .desplegable	contenedor para la lista desplegable
.selectbox .ul desplegable	lista desplegable
.selectboxli	seleccionar elemento (opción)
.selectbox li.seleccionado	seleccionado seleccionar elemento
.selectbox li.disabled	deshabilitado (no disponible para selección) seleccionar elemento

Conclusión

Crear un guión de este tipo es una tarea bastante laboriosa, ya que hay que tener en cuenta muchos puntos diferentes. Realmente espero que no aparezcan errores graves. Pero, en todo caso, házmelo saber en los comentarios.

Muy a menudo, los diseñadores dibujan diseños con elementos de formulario no estándar, es decir. El diseño de casillas de verificación, botones de opción, entradas y selectores difiere de lo que muestra el navegador de forma predeterminada. Por tanto, el maquetador se enfrenta a la tarea de personalizar el diseño, incluyendo elementos seleccionados.

En este artículo veremos cómo cambiar la apariencia de las selecciones. Sin embargo, nos adheriremos a la siguiente ideología. Tiene sentido personalizar solo el estado contraído predeterminado del selector, y el diseño de la lista desplegable debe seguir siendo estándar. Por lo tanto, la solución que se describe a continuación no funcionará si necesita una lista desplegable compleja, por ejemplo, con iconos o casillas de verificación para cada opción.

Por otro lado, este enfoque permite:

1. No escriba código javascript que emule el comportamiento de los selectores. Toda la lógica recae en el navegador. Hay muchos complementos hoy en día, pero no suele encontrarse uno que maneje todos los casos extremos que encuentra el usuario al interactuar con este control. Un ejemplo de un caso extremo sería seleccionar automáticamente la posición de una lista desplegable (abrir hacia abajo o abrir).

2. Dado que el navegador es responsable del comportamiento y diseño de la lista desplegable, no es necesario escribir ninguna solución separada para dispositivos móviles que permita trabajar cómodamente con selectores en dispositivos táctiles con pantallas pequeñas. Los selectores nativos integrados toman la forma deseada, porque en las plataformas móviles todo ya está pensado. Por ejemplo, cuando los usuarios de iOS hacen clic en el selector, no verán su lista personalizada, sino la familiar estándar. Los usuarios no necesitarán ajustar su comportamiento a su sitio específico; su comportamiento será el mismo que en todos los demás sitios. Y es conveniente para él, y por eso creaste el sitio.

Entonces, como ya se mencionó, las propiedades CSS3 son suficientes para diseñar la selección.

La propiedad principal que te permitirá cambiar la apariencia del selector es apariencia. Obliga a un elemento a convertirse en lo que usted desee, por ejemplo, puede forzar a un div a convertirse en un botón. Sin embargo, para nuestros propósitos, el valor interesante es none, lo que significa que no es necesario aplicar ningún estilo al elemento. De esta manera podemos eliminar el atributo específico de selección: la flecha hacia abajo a la derecha.

Seleccione ( -webkit-apariencia: ninguna; -moz-apariencia: ninguna; -ms-apariencia: ninguna; apariencia: ninguna! Importante;)

Como puede ver, eliminar la flecha no fue difícil, ahora todo lo que queda es agregar algunas propiedades CSS triviales como marco, fuente, etc. Aquí, por supuesto, puede agregar esquinas redondeadas, sombras, etc., todo tal como lo dibujó el diseñador en el diseño. La lista desplegable principal sigue siendo nativa.

Seleccione (fondo: transparente; pantalla: bloque; ancho: 100%; borde: 1px sólido #a7a7a7; color: #32353a; familia de fuentes: 16/Arial, sans-serif; tamaño de fuente: 16px; altura de línea: 1,4 ; peso de fuente: normal; relleno: 7px 7px 10px; alineación vertical: superior -apariencia del kit web: ninguno;

Ahora solo queda agregar una flecha o algún otro ícono como fondo. Usaremos el fondo, ya que los pseudoelementos como antes y después no funcionarán para la selección. Para una mejor visualización de sitios en diferentes dispositivos con diferentes densidades de píxeles, en diferentes escalas, etc. Es común utilizar íconos SVG. Por lo tanto, utilizando un codificador de URL en línea para SVG, convertiremos el icono en un URI de datos. Es importante recordar que la etiqueta SVG debe tener el atributo xmlns="http://www.w3.org/2000/svg".

Obtendrá el siguiente resultado.

%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8"%3E%3Cpath fill="%23000" regla de relleno ="evenodd" class="cls-1" d="M8,0L4.141,6.993,0.012,0.156Z"/%3E%3C/svg%3E%0A

Dado que la flecha utilizada no es estándar, puede moverla hacia la izquierda o usar cualquier otra imagen en lugar de la flecha, o puede prescindir por completo de los íconos.

Con la llegada de CSS3, fue posible crear un hermoso estilo para cualquier elemento del sitio. Porque CSS3 proporciona una amplia gama de capacidades que aceleran el proceso de desarrollo del diseño de un sitio web. Hoy aplicaremos estilo al elemento seleccionado en CSS. Para aquellos que no lo saben, este elemento es responsable de la lista desplegable del sitio. Mucha gente utiliza la vista estándar, pero puedes cambiarla para adaptarla al diseño de tu sitio.

No hay nada mejor que ver con tus propios ojos cómo luce la lista:

Descargar

Así es como se ve esta Selección en CSS:

Artículos similares sobre este tema:

Ahora describiré el proceso de instalación paso a paso usando esta lista desplegable o simplemente Seleccionar.

1 paso. Conectamos los archivos necesarios.

Es sencillo. Después de descargar el archivo con las fuentes desde allí, necesitaremos 2 archivos (style.css y select.js, si conecta la primera opción de la lista o select_demo2.js, si conecta la segunda opción). Conectamos estos dos archivos entre las etiquetas:

1 2

Paso 2. Estructura HTML del elemento Seleccionar

No hay nada súper complejo en la estructura (y por qué debería haberlo, es solo HTML :)). Un formulario simple que contiene un menú desplegable Seleccionar con sus elementos:

1 2 3 4 5 6 7 8 9 10 11 12

Países del Reino Unido: Por favor seleccione un país: Inglaterra Irlanda del Norte Escocia Gales

Paso 3. Agregar estilos para Seleccionar CSS

No hay muchos de ellos. A continuación proporciono los estilos para la primera opción de la lista. Me gustaría llamar su atención sobre los caminos hacia las imágenes. Solo hay dos: el primero es para abrir la lista y el segundo para cerrar. Parecen dos flechas "arriba" y "abajo" respectivamente. Se pueden descargar de las fuentes ubicadas al principio del artículo:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

.dropcontainer (posición: relativa; tamaño de fuente: 16px; color: #777;) .trigger (color: #777; relleno: 10px; tamaño de fuente: 16px; ancho: 50%; fondo: #fff url () 98 % centro sin repetición; visualización: bloque; borde: 1px sólido #ccc; -webkit-box-sizing: borde-box; transición: todos 0.5s facilidad; -moz-transition: todos 0.5s facilidad; todos los 0,5 s facilitan; transición: todos los 0,5 s facilitan) .trigger: hover (color: #777; fondo: #f5f5f5 url (../images/select-arrow-open.png) 98% centro sin repetición;). activetrigger (color: #777; relleno: 10px; tamaño de fuente: 16px; ancho: 50%; fondo: #f5f5f5 url () 98% centro sin repetición; pantalla: bloque; borde: 1px sólido #ccc; -webkit- tamaño del cuadro: cuadro de borde;

En el ejemplo de demostración, los estilos se encuentran en la carpeta css. Por lo tanto, cuando configuramos la ruta a una carpeta con imágenes en la ruta, primero escribimos ".." (dos puntos) para subir un nivel. Y luego ve a la carpeta de imágenes.

Ahora quiero decir qué se puede hacer para no copiar completamente los estilos de la segunda versión de la lista (que tiene una altura fija), sino cambiar una propiedad y obtener una lista fija.

Debe reemplazar la última propiedad desplegable visible:

1 2 3

.dropdownvisible (altura: auto;)

1 2 3 4

.dropdownvisible (altura: 200px; desbordamiento-y: desplazamiento;)

Y si no olvida reemplazar los scripts (vea arriba qué cambiar y qué), obtendrá lo siguiente:

¿En qué navegadores funciona bien esta Seleccionar CSS (lista desplegable)?

• ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
• ✓ Cromo 29.0, Cromo 30.0, Cromo 31.0
• ✓ Ópera 12.14, Ópera 12.15, Ópera 12.16
• ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
• ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
• ✓ Apple iOS: iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
• ✓ Android: Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

Complemento a la lección: efecto de desplazamiento creativo + VIDEO

Además de la lección, quiero contarte cómo hacer otro efecto en el sitio muy inusual: el efecto de desplazamiento. Mire este breve vídeo y compruébelo usted mismo.

Conclusión

Otro elemento del sitio, Seleccionar, se puede cambiar para adaptarlo a su diseño utilizando CSS y Javascript. No hay nada complicado en el proceso de instalación, así que lo conseguirás. Además, como complemento al artículo, recibirá un método creativo y un vídeo de instalación.

Incluya el archivo CSS en la sección de encabezado:

.. ..

Si desea utilizar un tema diferente, no olvide copiar el archivo CSS a la carpeta de su proyecto.

Aplicar un estilo a Seleccionar

Cuando utiliza EasyDropDown.js, su marcado sigue siendo claro e intuitivo. Solo necesita agregar un elemento de selección normal. También puede desactivar este elemento, asignarle una etiqueta y designar un elemento que debe seleccionarse de forma predeterminada.

Para diseñar un elemento, simplemente asígnele la clase desplegable. He aquí un ejemplo:

Configuración Opción 1 Opción 2 Opción 3 Opción 4 Opción 5

Eso es todo, no necesitas nada más. Ahora tu elemento SELECT será más bonito.

Si necesita seleccionar inicialmente un elemento, utilice el atributo seleccionado. En este caso, no recomendamos utilizar una etiqueta, porque La visualización puede estar ligeramente distorsionada.

... Opción 2 ...

También puedes deshabilitar un elemento agregando el atributo deshabilitado:

...

Elegir un tema

El complemento EasyDropDown.js viene con 2 temas de estilo: Metro y Flat. Para conectarlos, utilice el atributo de atributo de datos HTML5.

Para aplicar un tema diferente, dentro del elemento SELECT escriba data-settings="("wrapperClass":"theme-name")" . El parámetro theme-name puede tomar los siguientes valores: metro o flat. Ejemplos:

...