1516 votos

¿Cómo el estilo de un menú desplegable < select > con CSS sin JavaScript?

Hay un CSS-única forma de estilo <select> desplegable?

Necesito un estilo <select> forma tanto como sea humanamente posible, sin JavaScript. ¿Cuáles son las propiedades que puede utilizar para hacerlo en CSS?

Este código debe ser compatible con todos los principales navegadores:

  • Internet Explorer 6,7 y 8
  • Firefox
  • Safari

Yo sé que puedo hacer con JavaScript: Ejemplo.

Y no estoy hablando de estilo sencillo. Quiero saber, lo que lo mejor que se puede hacer con CSS solo.

Me encontré con preguntas similares sobre Stack Overflow.

Y este uno de Doctype.com.

1153voto

Danield Puntos 17720

Después de una extensa búsqueda, he encontrado dos razonable de enfoques para la creación personalizada de pure-CSS seleccione desplegables.

Enfoque #1. Artículo Original aquí

Ajustar el elemento select en un div con un ancho fijo (digamos 150 píxeles) y rebosadero oculto. A continuación, dar el elemento select de un ancho de 20 píxeles mayor que la div. El resultado es que el valor predeterminado de la flecha desplegable del elemento select será cortada, y se puede poner cualquier imagen de fondo que desee en el lado derecho de la div.

La ventaja de este enfoque es que es cross-browser (Internet Explorer 8 y versiones posteriores, WebKity Gecko). Sin embargo, la desventaja de este enfoque es que el desplegable de opciones sobresale en el lado derecho (por el 20 píxeles, la cual escondimos... porque los elementos de opción que tomar el ancho de la selección elment).

[Cabe señalar, sin embargo, que si la costumbre de seleccionar elemento es necesario para MÓVILES de este problema de arriba, no se aplica - debido a la forma en que cada teléfono de forma nativa abre el elemento select. Así que para móvil, esta es probablemente la mejor solución.]

[He aquí un demo de este enfoque]

Enfoque #2 post Original aquí

El uso de la pointer-events de la propiedad.

La idea aquí es la superposición de un elemento en el nativo de la flecha desplegable (para crear nuestro custom) y, a continuación, rechazar los eventos de puntero sobre él.

Ventaja: No más marcado, funciona bien en WebKit y Gecko.

Desventaja: Internet Explorer no admite pointer-events. (incluso a Internet Explorer 10), lo que significa que usted no haga clic en la costumbre de flecha. También, otro (obvio) desventaja de este método es que no puede orientar su nueva flecha de la imagen con un efecto de hover o cursor de la mano, porque sólo hemos deshabilitado los eventos de puntero sobre ellos!

Sin embargo, con este método se puede utilizar Modernizador o comentarios condicionales para Internet Explorer volver al estándar, construido en flecha.

Esto, en mi opinión, es la mejor solución disponible hasta la fecha (al menos hasta la appearance de la propiedad se hace más ancha soporte de navegador).

Aquí es un violín (que utiliza el segundo método, junto con Internet Explorer condicionales) donde usted puede verificar esto.

Siendo que Internet Explorer 10 no admite conditional comments ya: Si desea utilizar el enfoque #2, usted probablemente debería usar Modernizr. Sin embargo, todavía es posible excluir el puntero-eventos CSS de Internet Explorer 10 con un CSS hack descrito en Stack Overflow pregunta ¿Cómo puedo destino de Internet Explorer 10 para determinadas situaciones, como Internet Explorer-CSS específica o Internet Explorer específicas de código JavaScript?.

250voto

Matthew Morek Puntos 1895

Es posible, pero por desgracia la mayoría en Webkit navegadores basados en la medida que nosotros, como desarrolladores, requieren. Aquí está el ejemplo de estilo CSS se reunieron desde Chrome panel de opciones a través de built-in de herramientas de desarrollador de inspector, la mejora de coincidir en la actualidad propiedades CSS compatibles con la mayoría de navegadores modernos:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */ 
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Cuando se ejecuta este código en cualquier página dentro de un navegador basado en internet se debe cambiar la apariencia del cuadro de selección, eliminar estándar del sistema operativo de flecha y agregar un PNG de flecha, poner un poco de espacio antes y después de la etiqueta, casi cualquier cosa que usted quiere.

La parte más importante es appearance de la propiedad, que cambia la manera en que el elemento se comporta.

Funciona perfectamente en casi todas las navegador basado en internet, móviles incluidos, aunque Gecko no admite appearance así como Webkit, lo que parece.

70voto

pavium Puntos 7845

Seleccione el elemento y su desplegable característica son difíciles de estilo.

atributos de estilo para el elemento select confirma lo que Ryan Dohery dijo en un comentario a la primera respuesta:

"El elemento select es parte de la sistema operativo, no el navegador Chrome. Por lo tanto, es muy no fiables por el estilo, y no necesariamente el sentido de intentar de todos modos."

46voto

ioTus Puntos 406

La mayor incoherencia que he notado al estilo de seleccionar las listas desplegables es Safari y Google Chrome la representación (Firefox es totalmente personalizable mediante CSS). Después de algunas búsquedas a través de oscuras profundidades de la Internet me encontré con la siguiente, que casi en su totalidad resuelve mis reparos con WebKit:

Safari y Google Chrome revisión:

select
  -webkit-appearance: none;

Esto, sin embargo, quitar la flecha desplegable. Usted puede agregar una flecha desplegable el uso de cerca de un div con un fondo, el margen negativo o absolutamente posicionado sobre el seleccione el menú desplegable.

*Más información y otras variables están disponibles en la propiedad CSS: -webkit-apariencia.

36voto

jeremyosborne Puntos 746

<select>etiquetas pueden ser labrados a través de CSS como cualquier otro elemento HTML en un HTML página en un navegador. A continuación es un ejemplo (excesivamente simple) que posicionará un elemento select en la página y representar el texto de las opciones en azul.

Archivo de ejemplo HTML (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="yourMom">Your Mom</option>
  <option value="myMom">My Mom</option>
</select>
</body>
</html>

Ejemplo de fichero CSS (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X