problema con <select> y: después con CSS en WebKit

Question

Me gustaría agregar un poco de estilo en un cuadro de selección con el pseudo: después (para dar estilo a mi cuadro de selección con 2 partes y sin imágenes). Aquí está el HTML:

<select name=""> 
    <option value="">Test</option> 
</select> 

Y no funciona. No sé por qué y no encontré la respuesta en las especificaciones W3C. Aquí está la CSS:

select { 
    -webkit-appearance: none; 
    background: black; 
    border: none; 
    border-radius: 0; 
    color: white; 
} 

select:after { 
    content: " "; 
    display: inline-block; 
    width: 24px; height: 24px; 
    background: blue; 
} 

Entonces, ¿es normal o hay un truco?

Answer 1

No he comprobado esto extensivamente, pero tengo la impresión de que esto no es (¿todavía?) Posible, debido a la forma en que los elementos select son generados por el sistema operativo en el que se ejecuta el navegador, que el navegador en sí.

Answer 2

Ha tenido el mismo problema. Probablemente podría ser una solución:

<select id="select-1"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option> 
</select> 
<label for="select-1"></label> 

#select-1 { 
    ... 
} 

#select-1 + label:after { 
    ... 
} 

Answer 3

Este post puede ayudar a http://bavotasan.com/2011/style-select-box-using-only-css/

Él está usando un div exterior con una clase para resolver este problema.

<div class="styled-select"> 
    <select> 
    <option>Here is the first option</option> 
    <option>The second option</option> 
    </select> 
</div> 

Answer 4

que estaba buscando la misma cosa desde el fondo de mi selección es el mismo que el color de la flecha. Como se mencionó anteriormente, es imposible agregar nada usando: before o: after en un elemento seleccionado. Mi solución fue crear un elemento contenedor en el que agregué lo siguiente: antes del código.

.select-wrapper { 
    position: relative; 
} 

.select-wrapper:before { 
    content: '\f0d7'; 
    font-family: FontAwesome; 
    color: #fff; 
    display: inline-block; 
    position: absolute; 
    right: 20px; 
    top: 15px; 
    pointer-events: none; 
} 

Y esto Mi Selecto

select { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    width: 100%; 
    padding: 10px 20px; 
    background: #000; 
    color: #fff; 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
} 

select::-ms-expand { 
    display: none; 
} 

he utilizado para mi nuevo FontAwesome.io flecha, pero se puede usar cualquier otra cosa que desee. Obviamente, esta no es una solución perfecta, pero dependiendo de sus necesidades, podría ser suficiente.

Answer 5

Esta solución es similar a la de Sroy, pero con el triángulo CSS en lugar de la fuente web:

.select-wrapper { 
 
    position: relative; 
 
    width: 200px; 
 
} 
 
.select-wrapper:after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-top: 6px solid #666; 
 
    position: absolute; 
 
    right: 8px; 
 
    top: 8px; 
 
    pointer-events: none; 
 
} 
 
select { 
 
    background: #eee; 
 
    border: 0 !important; 
 
    border-radius: 0; 
 
    -webkit-appearance:none; 
 
    -moz-appearance:none; 
 
    appearance:none; 
 
    text-indent: 0.01px; 
 
    text-overflow: ""; 
 
    font-size: inherit; 
 
    line-height: inherit; 
 
    width: 100%; 
 
} 
 
select::-ms-expand { 
 
    display: none; 
 
}

<div class="select-wrapper"> 
 
    <select> 
 
    <option value="1">option 1</option> 
 
    <option value="2">option 2</option> 
 
    <option value="3">option 3</option> 
 
    </select> 
 
</div>

Answer 6

Ésta es una solución moderna Cociné usando font-awesome. Las extensiones de proveedor se han omitido por brevedad.

HTML

<fieldset> 
    <label for="color">Select Color</label> 
    <div class="select-wrapper"> 
     <select id="color"> 
      <option>Red</option> 
      <option>Blue</option> 
      <option>Yellow</option> 
     </select> 
     <i class="fa fa-chevron-down"></i> 
    </div> 
</fieldset> 

SCSS

fieldset { 
    .select-wrapper { 
     position: relative; 

     select { 
      appearance: none; 
      position: relative; 
      z-index: 1; 
      background: transparent; 

      + i { 
       position: absolute; 
       top: 40%; 
       right: 15px; 
      } 
     } 
    } 

Si el elemento de selección tiene un color de fondo definido, entonces esto no funcionará como este fragmento sitúa esencialmente en el icono de Chevron tras la Elemento seleccionado (para permitir hacer clic en la parte superior del icono para iniciar la acción de selección).

Sin embargo, puede aplicar un estilo al contenedor de selección del mismo tamaño que el elemento de selección y al estilo de fondo para lograr el mismo efecto.

Eche un vistazo a mi CodePen para ver una demostración que muestra este código en un cuadro de selección oscuro y ligero con una etiqueta normal y una etiqueta de "marcador de posición" y otros estilos limpios como bordes y anchuras.

P.S. Esta es una respuesta que había publicado en otra pregunta duplicada a principios de este año.

Answer 7

Para mi experiencia, simplemente no funciona, a menos que esté dispuesto a envolver su <select> en un envoltorio. Pero lo que puedes hacer es usar SVG de la imagen de fondo. P.ej.

.archive .options select.opt { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    padding-right: 1.25EM; 
    appearance: none; 
    position: relative; 
    background-color: transparent; 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E"); 
    background-repeat: no-repeat; 
    background-size: 1.5EM 1EM; 
    background-position: right center; 
    background-clip: border-box; 
    -moz-background-clip: border-box; 
    -webkit-background-clip: border-box; 
} 

    .archive .options select.opt::-ms-expand { 
     display: none; 
    } 

Solo tenga cuidado con la codificación URL correcta debido a IE. Debe usar charset=utf8 (no solo utf8), no use comillas dobles (") para delimitar los valores de los atributos SVG, use apóstrofes (') en su lugar para simplificar su vida. URL-encoded s (% 3E). En caso de que tenga para imprimir cualquier carácter que no sea ASCII, debe obtener su representación UTF-8 (p. ej., BabelMap puede ayudarlo) y luego proporcionar esa representación en formato codificado en URL, p. ej. para ▾ (U+25BE PEQUEÑO TRIÁNGULO PEQUEÑO NEGRO) UTF- 8 representación es \xE2\x96\xBE que es %E2%96%BE cuando está codificada en URL