Me gustaría agregar algo de estilo en un cuadro de selección con el pseudo: after (para diseñar 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 del W3C. Aquí está el 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?
Respuestas:
No lo he verificado ampliamente, pero tengo la impresión de que esto no es (¿todavía?) Posible, debido a la forma en que los
selectelementos son generados por el sistema operativo en el que se ejecuta el navegador, en lugar del navegador en sí.fuente
Estaba buscando lo mismo ya que el fondo de mi selección es el mismo que el color de la flecha. Como se mencionó anteriormente, aún es imposible agregar algo 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.
Y esta mi selecta
He usado FontAwesome.io para mi nueva flecha, pero puedes usar lo que quieras. Obviamente, esta no es una solución perfecta, pero dependiendo de sus necesidades, puede ser suficiente.
fuente
En mi experiencia, simplemente no funciona, a menos que esté dispuesto a envolverlo
<select>en algún envoltorio. Pero lo que puede hacer en su lugar es usar SVG de imagen de fondo. P.ejSolo tenga cuidado con la codificación de URL adecuada debido a IE. Debe usar
charset=utf8(no soloutf8), no use comillas dobles (") para delimitar los valores de los atributos SVG, use apóstrofos (') en su lugar para simplificar su vida. URL-encode s (% 3E). En caso de que tenga que imprimir cualquier carácter que no sea ASCII tiene que obtener su representación UTF-8 (por ejemplo, BabelMap puede ayudarlo con eso) y luego proporcionar esa representación en forma codificada en URL, por ejemplo, para ▾ (U+25BENEGRO DOWN-POINTING PEQUEÑO TRIÁNGULO) La representación UTF-8 es\xE2\x96\xBEque es%E2%96%BEcuando está codificado en URL.fuente
Esta publicación puede ayudar a http://bavotasan.com/2011/style-select-box-using-only-css/
Está usando un div externo con una clase para resolver este problema.
fuente
Enfrentó el mismo problema. Probablemente podría ser una solución:
fuente
Esta solución es similar a la de sroy, pero con triángulo css en lugar de fuente web:
fuente
¿Qué pasa si modificar el marcado no es una opción?
Aquí hay una solución que no tiene requisitos para un contenedor: usa un SVG en una imagen de fondo. Puede que necesite utilizar un decodificador de entidad HTML para comprender cómo cambiar el color de relleno.
Pellizcado de CSS-Tricks .
fuente
Esta es una solución moderna que inventé usando font-awesome . Las extensiones del proveedor se han omitido por brevedad.
HTML
SCSS
Si su elemento seleccionado tiene un color de fondo definido, entonces esto no funcionará ya que este fragmento esencialmente coloca el ícono de Chevron detrás del elemento de selección (para permitir hacer clic en la parte superior del ícono para iniciar la acción de selección).
Sin embargo, puede diseñar el contenedor de selección con el mismo tamaño que el elemento de selección y diseñar su fondo para lograr el mismo efecto.
Consulte mi CodePen para ver una demostración funcional que muestra este fragmento de código en un cuadro de selección de temática oscura y clara utilizando una etiqueta regular y una etiqueta de "marcador de posición" y otros estilos limpios como bordes y anchos.
PD: Esta es una respuesta que había publicado a otra pregunta duplicada a principios de este año.
fuente
En lugar de diseñar la selección, ¿por qué no agrega un div fuera de la selección?
y estilo luego en CSS
fuente