Sto utilizzando un menu di selezione/discesa personalizzato per la soluzione qui: https://stackoverflow.com/a/10190884/1318135Pure CSS Seleziona Menu/Dropdown: Come creare una freccia destra personalizzata?
Questa funzione è ottima, tranne che la "freccia" sulla destra non sembra molto buona. Mi piacerebbe che fosse più ampio, simile nell'aspetto alle frecce di voto su/giù su questo sito (guarda a sinistra).
Ha tentato il seguente, aperta a una soluzione che utilizza uno di questi o altre opzioni:
-integrazione un'immagine in formato HTML (. Non poteva farlo per mostrare in primo piano v discesa)
-Location un font con una più ampia freccia per il personaggio (non riusciva a trovare uno)
-Impostazione proprietà background-image in CSS (visualizzato di default freccia verso il basso invece)
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;
}
Qual è quella stringa enorme, alla fine di esso?!?! – user1318135
Un'immagine in base64 (potrebbe essere solo un percorso per la tua immagine, ma dal momento che era un violino e qui, ho usato quella stringa piuttosto che un file separato) –
È un unicorno presumo? – Knu