Estoy usando un menú personalizado de selección/desplegable para la solución aquí: https://stackoverflow.com/a/10190884/1318135Menú de selección de CSS puro/desplegable: ¿Cómo hacer una flecha derecha personalizada?
Esto funciona muy bien, excepto que la 'flecha' de la derecha no se ve muy bien. Me gustaría que fuera más amplio, de apariencia similar a las flechas de voto arriba/abajo en este sitio (mira a la izquierda).
intentado lo siguiente, abierto a una solución utilizando cualquiera de estos u otras opciones:
-Integración una imagen en HTML (. No pudo conseguir que se muestran en primer plano desplegable v)
-ubicación una fuente con un amplio flecha para el personaje (no podía encontrar uno)
-Configuración de la propiedad imagen de fondo en CSS (que se muestra por defecto en lugar de flecha hacia abajo)
http://jsfiddle.net/XxkSC/553/
HTML:
<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>
CSS:
label.custom-select {
position: relative;
display: inline-block;
}
.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}
/* Select arrow styling */
.custom-select:after {
content: "▼"; /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}
.no-pointer-events .custom-select:after {
content: none;
}
¿Cuál es esa cadena enorme al final de la misma?!?! – user1318135
Una imagen en base64 (podría ser solo una ruta a su imagen, pero como era un violín y aquí, utilicé esa cadena en lugar de un archivo separado) –
Supongo que es un unicornio? – Knu