¿Cómo le doy estilo a un menú desplegable <select> solo con CSS?
-
19-09-2019 - |
Pregunta
¿Existe una forma exclusiva de CSS para diseñar un <select>
¿desplegable?
Necesito diseñar un <select>
forme tanto como sea humanamente posible, sin ningún JavaScript.¿Cuáles son las propiedades que puedo usar para hacerlo en CSS?
Este código debe ser compatible con todos los navegadores principales:
- Internet Explorer 6, 7 y 8
- Firefox
- Safari
Sé que puedo hacerlo con JavaScript: Ejemplo.
Y no me refiero a un estilo simple.Quiero saber qué es lo mejor que podemos hacer solo con CSS.
encontré preguntas similares en Stack Overflow.
Y Éste en Doctype.com.
Solución
Aquí hay tres soluciones:
Solución # 1 - Aspecto: ninguno - con Internet Explorer 10 - 11 Solución ( Demostración )
-
Para ocultar el conjunto predeterminado flecha appearance: none
en el elemento de selección, a continuación, añadir su flecha a medida con background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Soporte para el navegador:
appearance: none
tiene muy buen soporte de los navegadores ( caniuse ) - a excepción de Internet Explorer 11 ( y más tarde) y Firefox 34 (y más adelante).
Podemos mejorar esta técnica y añadir soporte para Internet Explorer 10 y 11 de Internet Explorer añadiendo
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
Si Internet Explorer 9 es una preocupación, no tenemos ninguna manera de eliminar la flecha por defecto (lo que significaría que ahora tendríamos dos flechas), pero, podríamos utilizar un selector cobarde Internet Explorer 9.
Para deshacer al menos nuestra flecha costumbre -. Dejando intacta la flecha de selección por defecto
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Todos juntos:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
Esta solución es fácil y tiene un buen soporte del navegador -. Bastaría general
Si el apoyo del navegador Internet Explorer 9 (y posteriores) y Firefox 34 (y más adelante) es necesario entonces sigue leyendo ...
Solución # 2 truncar el elemento de selección para ocultar la flecha por defecto ( demostración )
-
Envolver el elemento select
en un div con un ancho fijo y overflow:hidden
.
A continuación, dar al elemento select
una anchura de unos 20 píxeles mayor que el div .
El resultado es que la flecha desplegable por defecto del elemento select
se ocultará (debido a la overflow:hidden
en el envase), y se puede colocar cualquier imagen de fondo que desee en la mano del lado derecho de la div.
La ventaja de este enfoque es que es multi-navegador (Internet Explorer 8 y versiones posteriores, WebKit y Gecko ). Sin embargo, la desventaja de este enfoque es que las opciones desplegables se adentra en la mano del lado derecho (por los 20 píxeles que nos escondimos ... porque los elementos de opciones tienen el ancho de la seleccione elemento).
[Cabe señalar, sin embargo, que si el elemento personalizado de selección es necesario sólo para móviles dispositivos - a continuación, el problema anterior no se aplica - debido a la forma de cada teléfono se abre de forma nativa el selecto elemento. Así que para móvil, esta puede ser la mejor solución.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
Si la flecha a medida es necesaria en Firefox - antes de la Versión 35 -, pero no es necesario para apoyar las versiones antiguas de Internet Explorer - entonces sigue leyendo ...
Solución # 3 - Utilice la propiedad pointer-events
( demostración )
-
La idea aquí es superponer un elemento más de la caída nativa flecha hacia abajo (para crear nuestra costumbre uno) y luego no permitir eventos de puntero en él.
Ventaja: Funciona bien en WebKit y Gecko. Se ve bien también (hay que sobresale elementos option
).
Desventaja: Internet Explorer (Internet Explorer 10 y hacia abajo) no es compatible con pointer-events
, lo que significa que no puede hacer clic en la flecha personalizado. Además, otra desventaja (obvio) con este método es que no se puede orientar su imagen Flecha de nuevo con un efecto de vuelo estacionario o cursor de la mano, porque tenemos eventos de puntero acaba con discapacidad en ellos!
Sin embargo, con este método se puede utilizar renovador o comentarios condicionales para que Internet Explorer volver a la norma construida en flecha.
Nota: Ser que Internet Explorer 10 no soporta más conditional comments
: Si desea utilizar este enfoque, probablemente debería utilizar Modernizr . Sin embargo, todavía es posible excluir el puntero CSS-eventos de Internet Explorer 10 con un hack CSS descrito aquí .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
Otros consejos
Es posible, pero desafortunadamente principalmente en navegadores basados en WebKit en la medida en que nosotros, como desarrolladores, lo necesitemos.Este es el ejemplo de estilo CSS recopilado del panel de opciones de Chrome a través del inspector de herramientas de desarrollador integrado, mejorado para que coincida con las propiedades CSS actualmente admitidas en la mayoría de los 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 Firefox (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer 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 ejecuta este código en cualquier página dentro de un navegador basado en WebKit, debería cambiar la apariencia del cuadro de selección, eliminar la flecha estándar del sistema operativo y agregar una flecha PNG, poner algo de espacio antes y después de la etiqueta, casi cualquier cosa que desee.
La parte más importante es appearance
propiedad, que cambia el comportamiento del elemento.
Funciona perfectamente en casi todos los navegadores basados en WebKit, incluidos los móviles, aunque Gecko no es compatible. appearance
además de WebKit, al parecer.
El elemento de selección y su función desplegable son difícil de peinar.
para selecto elemento por Chris Heilmann confirma lo que dijo Ryan Dohery en un comentario a la primera respuesta:
"El elemento de selección es parte de la sistema operativo, no el navegador Chrome. Por lo tanto, es muy poco fiable para el estilo, y no necesariamente tiene sentido tratar de todos modos ".
La inconsistencia más grande que he notado durante el peinado selectos menús desplegables es Safari y Google Chrome renderizado (Firefox es totalmente personalizable a través de CSS). Después de buscar a través de oscuras profundidades de Internet me encontré con el siguiente, que resuelve casi completamente mis reparos con WebKit:
Safari y Google Chrome solución
select {
-webkit-appearance: none;
}
Esto, sin embargo, quitar la flecha desplegable. Puede añadir una flecha de la derecha usando un div
cerca, con un fondo, el margen negativo o con posición absoluta sobre el selecto desplegable.
* Más información y otras variables están disponibles en propiedad CSS: -webkit-apariencia .
etiquetas <select>
pueden ser de estilo a través de CSS al igual que cualquier otro elemento HTML en una página HTML representado en un navegador. A continuación se muestra un ejemplo (demasiado simple) que posicionará a un elemento de selección de la página y hacer que el texto de las opciones en azul.
Ejemplo de un archivo 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="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Ejemplo de un archivo 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;
}
Tenía este problema exacto, excepto que no podía usar imágenes y no estaba limitado por el apoyo del navegador. Esto debería ser «por casualidad» y con suerte empezar a trabajar en todas partes finalmente .
Se utiliza capas de fondo en capas girada a «cortar» la flecha de la derecha, como pseudo-elementos no funcionarían para el elemento de selección.
Editar:. En esta versión actualizada estoy usando variables de CSS y un pequeño sistema de tematización
:root {
--radius: 2px;
--baseFg: dimgray;
--baseBg: white;
--accentFg: #006fc2;
--accentBg: #bae1ff;
}
.theme-pink {
--radius: 2em;
--baseFg: #c70062;
--baseBg: #ffe3f1;
--accentFg: #c70062;
--accentBg: #ffaad4;
}
.theme-construction {
--radius: 0;
--baseFg: white;
--baseBg: black;
--accentFg: black;
--accentBg: orange;
}
select {
font: 400 12px/1.3 sans-serif;
-webkit-appearance: none;
appearance: none;
color: var(--baseFg);
border: 1px solid var(--baseFg);
line-height: 1;
outline: 0;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: var(--radius);
background-color: var(--baseBg);
background-image: linear-gradient(var(--baseFg), var(--baseFg)),
linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}
select:hover {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}
select:active {
background-image: linear-gradient(var(--accentFg), var(--accentFg)),
linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
color: var(--accentBg);
border-color: var(--accentFg);
background-color: var(--accentFg);
}
<select>
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-pink">
<option>So many options</option>
<option>...</option>
</select>
<select class="theme-construction">
<option>So many options</option>
<option>...</option>
</select>
Aquí hay una versión que funciona en todos los navegadores modernos. La clave es usar appearance:none
que elimina el formato predeterminado. Dado que todo el formato se ha ido, hay que añadir de nuevo en la flecha que se diferencia visualmente el selectivo de la entrada.
Ejemplo de trabajo: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}
<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
La entrada de blog Cómo forma CSS desplegable estilo sin JavaScript funciona para mí, pero falla en Opera sin embargo:
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
llegué a su caso usando Bootstrap . Esta es la solución más simple que funciona:
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>
Nota:. El material base 64 es fa-chevron-down
en SVG
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
En los navegadores modernos que es relativamente indolora con el estilo de la <select>
en el CSS. Con appearance: none
la única parte difícil está reemplazando la flecha (si eso es lo que quiere). He aquí una solución que utiliza una línea data:
URI con texto sin formato SVG:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>
El resto del peinado (bordes, rellenos, colores, etc.) es bastante sencillo.
Esto funciona en todos los navegadores que acaba de intentar (Firefox 50, Chrome 55, 38 de borde, y Safari 10). Una nota acerca de Firefox es que si desea utilizar el carácter #
en el URI de datos (por ejemplo fill: #000
) que necesita para escapar de ella (fill: %23000
).
Utilice la propiedad clip
para recortar los bordes y la flecha del elemento select
, a continuación, añadir sus propios estilos de reemplazo a la envoltura:
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>
Use un segundo SELECT con cero opacidad pueda hacer clic en el botón:
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>
Las coordenadas difieren entre Webkit y otros navegadores, pero un @media consulta que puede cubrir.
Referencias
Un muy buen ejemplo que usa :after
y :before
para hacer el truco está en Seleccionar Styling Caja con CSS3 | CSSDeck
Sí. Es posible que el estilo de cualquier elemento HTML por su nombre de la etiqueta, así:
select {
font-weight: bold;
}
Por supuesto, también puede utilizar una clase CSS de estilo que, como cualquier otro elemento:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Editar No se recomienda este elemento, pero si quieres probar que es como cualquier otro elemento HTML.
Editar ejemplo:
/* Edit select */
select {
/* CSS style here */
}
/* Edit option */
option {
/* CSS style here */
}
/* Edit selected option */
/* element attr attr value */
option[selected="selected"] {
/* CSS style here */
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
sin duda debería hacerlo como en Styling selecto, y optgroup opciones con CSS . En muchos sentidos, color de fondo y el color son justo lo que normalmente se necesitan opciones de estilo, no toda la selección.
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
Esto utiliza un color de fondo para los elementos seleccionados y elimina la imagen ..
A partir de Internet Explorer 10, puede utilizar el ::-ms-expand
selector de pseudo-elemento de estilo, y esconderse, el menú desplegable elemento de flecha.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
El estilo restante debe ser similar a otros navegadores.
Aquí es un tenedor básica de jsFiddle de DanielD que se aplica apoyo a IE10
Esto es una solución basada en mis ideas preferidas de esta discusión. Esto permite estilizar un elemento
Funciona Internet Explorer 10 (y después) con un repliegue de seguridad para Internet Explorer 8/9. Una advertencia para estos navegadores es que la imagen de fondo debe ser colocado y ser lo suficientemente pequeña para ocultar detrás del control nativo expandirse.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
display: none;
}
CodePen
No existe una forma de estilo etiquetas SELECT.
Si hay un parámetro "tamaño" en la etiqueta, se aplicará casi cualquier CSS. El uso de este truco, he creado un violín que es prácticamente equivalente a una etiqueta de selección normal, más el valor puede editarse manualmente como un ComboBox en lenguajes visuales (a menos que poner de sólo lectura en la etiqueta de entrada).
Así que aquí está un ejemplo mínimo para ver el principio detrás:
(usted necesitará jQuery para el mecanismo de clic)
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Aquí está el violín con algunos más estilos: https://jsfiddle.net/dkellner/7ac9us70/
(Se overstyled por supuesto, sólo para demostrar las posibilidades.)
Observe cómo las etiquetas no se encapsulan las opciones pertenecientes debajo de ellos, ya que normalmente debería; Si esto es intencional, es por el estilo. (La forma de buenas maneras sería mucho menos con estilos.) Y sí que lo hacen funcionar perfectamente bien de esta manera.
Antes de que alguien señala la parte NO-JS: Sé que la pregunta dijo "no Javascript". Para mí, esto es más como por favor, no se moleste con los plugins, sé que pueden hacerlo, pero necesito la forma nativa . Entendido, no hay plugins, no hay secuencias de comandos adicionales incluyen, sólo lo que cabe dentro de una etiqueta "onclick". La única dependencia es jQuery, para evitar la locura nativo "document.parentNode.getElementsByTagName". Pero puede funcionar de esa manera. Así que sí, se trata de una etiqueta de selección nativa con un estilo nativo y algunos manipuladores onclick. No es claramente "una solución Javascript".
Disfrute!
También puede añadir un estilo de vuelo estacionario a la lista desplegable.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}
<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>
Un CSS y HTML única solución
Parece compatible con Chrome, Firefox e Internet Explorer 11. Pero por favor dejen sus comentarios sobre otros navegadores web.
Según lo sugerido por la respuesta de DanielD , envuelvo mi selección en un div (incluso dos divs para la compatibilidad x-navegador) para obtener el comportamiento esperado.
Ver http://jsfiddle.net/bjap2/
HTML:
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
Fíjese en las dos envolturas div.
Observe también el div extra añadido a colocar el botón de flecha hacia abajo donde quiera (posición absoluta), aquí lo ponemos a la izquierda.
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837F;
}
/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some
browsers have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height: 10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
El tercer método en el DanielD de responder se puede mejorar para trabajar con la libración de efectos y otros eventos de ratón. Sólo asegúrese de que el "botón" -elemento viene justo después de que el elemento de selección en el marcado. A continuación, apuntar que con el selector CSS +:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
<Hover styles here>
}
Esto, sin embargo, muestran el efecto de la libración cuando se pasa en cualquier lugar sobre el elemento de selección, no sólo sobre el "botón".
Estoy usando este método en combinación con angular (ya que mi proyecto pasa a ser una aplicación angular de todos modos), para cubrir todo el elemento de selección, y dejar que la pantalla angular del texto de la opción seleccionada en el "botón" - elemento. En este caso, tiene todo el sentido de que se aplica el cursor del efecto cuando se cierne sobre cualquier parte del selecto.
No funciona sin JavaScript, así que si usted quiere hacer esto, y su sitio tiene que trabajar sin JavaScript, debe asegurarse de que su script agrega los elementos y clases necesarias para la mejora. De esta manera, un navegador sin JavaScript simplemente conseguir un selecto normal, sin estilo, en lugar de una tarjeta de identificación de estilo que no se actualiza correctamente.
estilos personalizados Seleccionar CSS
Probado en Internet Explorer (10 y 11), Borde, Firefox y Chrome
select::-ms-expand {
display: none;
}
select {
display: inline-block;
box-sizing: border-box;
padding: 0.5em 2em 0.5em 0.5em;
border: 1px solid #eee;
font: inherit;
line-height: inherit;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 15px top 1em, right 10px top 1em;
background-size: 5px 5px, 5px 5px;
}
<select name="">
<option value="">Lorem</option>
<option value="">Lorem Ipsum</option>
</select>
<select name="" disabled>
<option value="">Disabled</option>
</select>
<select name="" style="color:red;">
<option value="">Color!</option>
<option value="">Lorem Ipsum</option>
</select>