html - una - menu vertical desplegable css

¿Cómo estilizar un menú desplegable de<selección> con solo CSS?

Question

¿Existe una forma solo de CSS para diseñar un menú desplegable <select> ?

Necesito diseñar una forma de <select> lo más 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 principales navegadores:

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

Sé que puedo hacerlo con JavaScript: Example .

Y no estoy hablando de un estilo simple. Quiero saber qué es lo mejor que podemos hacer con CSS solamente.

Encontré preguntas similares en Stack Overflow.

Y esta en doctype.com.

Answer 1

A partir de Internet Explorer 10, puede utilizar el selector de pseudo-elemento ::-ms-expand para dar estilo y ocultar el elemento de flecha desplegable.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it''s space/hitbox */
}

El estilo restante debe ser similar a otros navegadores.

Aquí hay una bifurcación básica de jsfiddle de Danield que aplica soporte para IE10

Answer 2

Aquí hay 3 soluciones:

Solución # 1 - apariencia: ninguna - con ie10-11 solución ( Demo )

Para ocultar el appearance: none conjunto de flechas predeterminado appearance: none en el elemento seleccionado, luego agregue su propia flecha personalizada con background-image

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* remove default arrow */
   background-image: url(...);   /* add custom arrow */
}

Soporte del navegador:

appearance: none tiene un soporte de navegador muy bueno ( caniuse ), excepto ie11- y firefox 34-

Podemos mejorar esta técnica y agregar soporte para ie10 y ie11 agregando

select::-ms-expand { 
    display: none; /* hide the default arrow in ie10 and ie11 */
}

Si ie9 es una preocupación, no tenemos forma de eliminar la flecha predeterminada (lo que significa que ahora tendríamos dos flechas), pero podríamos usar un selector funky ie9 para al menos deshacer nuestra flecha personalizada, dejando la flecha de selección predeterminada intacto.

/* 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..com/favicon.ico) 96% / 15% no-repeat #eee;
}


/* CAUTION: IE hackery ahead */


select::-ms-expand { 
    display: none; /* remove default arrow in IE 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 de navegador; por lo general, debería ser suficiente.

Si es necesario el soporte del navegador para ie9- y firefox 34- entonces sigue leyendo ...

Solución # 2 Trunca el elemento seleccionado para ocultar la flecha predeterminada ( Demo )

(Leer más aquí)

Envuelva el elemento select en un div con un ancho fijo y overflow:hidden .

Luego, asigne al elemento select un ancho de aproximadamente 20 píxeles mayor que el div .

El resultado es que la flecha desplegable predeterminada del elemento select estará oculta (debido al overflow:hidden en el contenedor), y puede colocar cualquier imagen de fondo que desee en el lado derecho de la div.

La ventaja de este enfoque es que es un navegador cruzado (Internet Explorer 8 y posterior, WebKit y Gecko ). Sin embargo, la desventaja de este enfoque es que las opciones desplegables sobresalen en el lado derecho (por los 20 píxeles que escondimos ... porque los elementos de opción ocupan el ancho del elemento seleccionado).

[Sin embargo, se debe tener en cuenta que si el elemento de selección personalizado es necesario solo para dispositivos MÓVIL , entonces el problema anterior no se aplica, debido a la forma en que cada teléfono abre de forma nativa el elemento de selección. Así que para móviles, 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..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 personalizada es necesaria en Firefox, antes de la versión 35 , pero no es necesario que sea compatible con versiones anteriores de IE, entonces siga leyendo ...

Solución # 3 - Use la propiedad pointer-events ( Demo )

(Leer más aquí)

La idea aquí es superponer un elemento sobre la flecha desplegable nativa (para crear una personalizada) y luego rechazar los eventos de puntero en él.

Ventaja: Funciona bien en WebKit y Gecko. También se ve bien (no sobresalen los elementos de option )

Desventaja: Internet Explorer (IE10 y abajo) no admite pointer-events , lo que significa que no puede hacer clic en la flecha personalizada. Además, otra desventaja (obvia) con este método es que no puede apuntar a su nueva imagen de flecha con un efecto de desplazamiento o cursor con la mano, ¡porque solo hemos desactivado los eventos de puntero en ellos!

Sin embargo, con este método puede usar Modernizer o comentarios condicionales para hacer que Internet Explorer vuelva a la flecha estándar incorporada.

NB: dado que Internet Explorer 10 ya no admite conditional comments : si desea utilizar este enfoque, probablemente debería usar Modernizr . Sin embargo, todavía es posible excluir los eventos de puntero CSS de Internet Explorer 10 con un truco de CSS descrito here .

.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..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]-->

Answer 3

Aquí hay una solución basada en mis ideas favoritas de esta discusión. Esto permite diseñar un elemento directamente sin ningún tipo de marca adicional.

Funciona IE10 + con un respaldo seguro para IE8 / 9. Una advertencia para estos navegadores es que la imagen de fondo debe estar posicionada y lo suficientemente pequeña como para esconderse detrás del control de expansión nativo.

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 IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
    display: none;
}

Codepen

http://codepen.io/ralgh/pen/gpgbGx

Answer 4

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 ha desaparecido, debe volver a agregar en la flecha que diferencia visualmente la selección 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>

Answer 5

Definitivamente deberías hacerlo como en Styling select, optgroup y options con CSS . En muchos sentidos, el color de fondo y el color son justo lo que normalmente necesitaría para diseñar opciones, no la selección completa.

Answer 6

El elemento de selección y su característica desplegable son difíciles de diseñar.

los atributos de estilo para el elemento select por Chris Heilmann confirman lo que Ryan Dohery dijo en un comentario a la primera respuesta:

"El elemento de selección es parte del sistema operativo, no del navegador Chrome. Por lo tanto, es muy poco confiable para el estilo y no tiene necesariamente sentido intentarlo de todos modos".

Answer 7

En los navegadores modernos es relativamente sencillo diseñar el <select> en CSS. Con appearance: none la única parte difícil es reemplazar la flecha (si eso es lo que quieres). Aquí hay una solución que utiliza data: línea data: URI con SVG de texto plano:

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 estilo (bordes, relleno, colores, etc.) es bastante sencillo.

Esto funciona en todos los navegadores que acabo de probar (Firefox 50, Chrome 55, Edge 38 y Safari 10). Una nota sobre Firefox es que si desea usar el carácter # en el URI de datos (por ejemplo, fill: #000 ) necesita escapar de él ( fill: %23000 ).

Answer 8

Es posible, pero desafortunadamente sobre todo en navegadores basados ​​en Webkit en la medida en que nosotros, como desarrolladores, lo necesitemos. Este es el ejemplo del estilo CSS recopilado desde el panel de opciones de Chrome a través del inspector de herramientas de desarrollador incorporado, mejorado para que coincida con las propiedades de CSS compatibles actualmente 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 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 ejecute 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 un espacio entre antes y después de la etiqueta, casi cualquier cosa que desee.

La parte más importante es la propiedad de appearance , que cambia el comportamiento del elemento.

Funciona perfectamente en casi todos los navegadores basados ​​en Webkit, incluidos los móviles, aunque Gecko no admite la appearance tan bien como Webkit, al parecer.

Answer 9

La mayor incoherencia que he notado al estilizar el menú desplegable de selección es Safari y Google Chrome (Firefox es totalmente personalizable a través de CSS). Después de buscar a través de las oscuras profundidades de Internet, encontré lo siguiente, que resuelve casi por completo mis dudas con WebKit:

Safari y Google Chrome solucionan :

select {
  -webkit-appearance: none;
}

Sin embargo, esto elimina la flecha desplegable. Puede agregar una flecha desplegable usando un div cercano con fondo, margen negativo o posicionado absolutamente sobre el desplegable de selección.

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

Answer 10

La publicación del blog How to CSS form drop down style no funciona con JavaScript , pero falla en Opera :

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>

Answer 11

Llegué a tu caso utilizando 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 base64 es fa-chevron-down en SVG.

Answer 12

No se recomienda editar este elemento, pero si quieres intentarlo es como cualquier otro elemento HTML.

Ejemplo de edición:

/*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>

Answer 13

Sí. Puede aplicar un estilo a cualquier elemento HTML por su nombre de etiqueta, de esta forma:

select {
  font-weight: bold;
}

Por supuesto, también puedes usar una clase CSS para darle un estilo, 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>

Answer 14

Si el estilo es un tema importante, puede ser útil usar un widget completamente personalizado, como el que se describe en la publicación del blog Reinventar un menú desplegable con CSS y jQuery .

Answer 15

Tuve este problema exacto, excepto que no podía usar imágenes y no estaba limitado por el soporte del navegador. Esto debería ser "sobre especificaciones" y, con suerte, comenzar a trabajar en todas partes eventualmente .

Utiliza capas de fondo rotadas en capas para "cortar" una flecha desplegable, ya que los pseudo-elementos no funcionarían para el elemento seleccionado.

Edición: En esta versión actualizada, estoy usando variables CSS y un pequeño sistema de temática.

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

Answer 16

Un muy buen ejemplo que usa :after y :before de hacer el truco está en Cuadro de selección de estilo con CSS3 | CSSDeck

Answer 17

Use la propiedad de clip para recortar los bordes y la flecha del elemento select , luego agregue sus propios estilos de reemplazo al envoltorio:

    <!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..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>

Utilice una segunda selección con opacidad cero para hacer que se 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..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 una consulta @media puede cubrir eso.

Referencias

• Pruebas de Dojo FX: dojox.fx.ext-dojo.complex
• Enmascaramiento de CSS: propiedad de clip de prueba con función rect y valores automáticos clip a cuadro de borde

Answer 18

<select> etiquetas <select> se pueden diseñar a través de CSS como cualquier otro elemento HTML en una página HTML representada en un navegador. A continuación se muestra un ejemplo (demasiado simple) que colocará un elemento de selección en la página y mostrará el texto de las opciones en azul.

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

Answer 19

Hay una manera de diseñar etiquetas SELECT.

Si hay un parámetro de "tamaño" en la etiqueta, se aplicará casi cualquier CSS. Usando este truco, he creado un violín que es prácticamente equivalente a una etiqueta de selección normal, más el valor se puede editar manualmente como un ComboBox en lenguajes visuales (a menos que se ponga solo en la etiqueta de entrada).

Así que aquí hay un ejemplo mínimo para ver el principio detrás:
(necesitarás 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 estilos más: https://jsfiddle.net/dkellner/7ac9us70/

(Por supuesto, está sobredimensionado, solo para demostrar las posibilidades).

Observe cómo las etiquetas no encapsulan las opciones que pertenecen a ellas como normalmente deberían; Sí, esto es intencional, es para el estilo. (La forma educada sería mucho menos estable). Y sí, funcionan perfectamente bien de esta manera.

Antes de que alguien señale la parte NO-JS: Sé que la pregunta dice "no Javascript". Para mí, esto es más bien, por favor, no te molestes con los complementos, sé que pueden hacerlo pero necesito la forma nativa . Entendido, no hay complementos, no se incluyen scripts adicionales, solo lo que encaja dentro del "clic" de una etiqueta. La única dependencia es jQuery, para evitar la locura nativa "document.parentNode.getElementsByTagName". Pero puede funcionar de esa manera. Entonces, sí, esta es una etiqueta de selección nativa con un estilo nativo y algunos controladores de clic. Claramente no es "una solución de Javascript".

¡Disfrutar!

Answer 20

Una solución solo para CSS y HTML

Me parece compatible con Chrome, Firefox y IE11. Pero por favor deje sus comentarios con respecto a otros navegadores web.

Como lo sugiere la respuesta de @Danield, envuelvo mi selección en un div (incluso dos divs para compatibilidad con x-browser) 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>

Note los 2 envoltorios div. Observe también la división extra agregada para colocar el botón de flecha hacia abajo donde lo desee (posicionado absolutamente), aquí lo colocamos 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 hidding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;
    /* margin-top & margin-bottom must be set since some browser 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;
}

Answer 21

También puede agregar un estilo de desplazamiento al 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>

Answer 22

El segundo método en la respuesta de Danield ( https://.com/a/13968900/280972 ) se puede mejorar para que funcione con efectos de hover y otros eventos del mouse. Solo asegúrese de que el elemento "botón" aparezca justo después del elemento seleccionado en el marcado. Luego apúntalo usando el selector + css:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    [hover styles here]
}

Sin embargo, esto mostrará el efecto de desplazamiento cuando se desplaza en cualquier lugar sobre el elemento de selección, no solo sobre el "botón".

Estoy usando este método en combinación con Angular (ya que mi proyecto es una aplicación Angular de todos modos), para cubrir todo el elemento de selección y permitir que Angular muestre el texto de la opción seleccionada en el elemento "botón". En este caso, tiene mucho sentido que el efecto de hover se aplique cuando se desplaza en cualquier lugar sobre la selección. Sin embargo, no funciona sin javascript, por lo que si quiere hacer esto y su sitio debe funcionar sin javascript, debe asegurarse de que su secuencia de comandos agregue los elementos y las clases necesarios para la mejora. De esa manera, un navegador sin javascript simplemente obtendrá un distintivo normal, sin estilo, en lugar de un distintivo con estilo que no se actualice correctamente.

Answer 23

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 usa un color de fondo para seleccionar elementos y eliminé la imagen.

Answer 24

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