Seleziona il cambio di stile della freccia

Sto provando a sostituire la freccia di una selezione con una mia immagine personale. Sto includendo la selezione in un div con le stesse dimensioni, ho impostato lo sfondo della selezione come trasparente e sto includendo un’immagine (con le stesse dimensioni della freccia) nell’angolo in alto a destra del div come sfondo.

Funziona solo su Chrome.

inserisci la descrizione dell'immagine qui

Come posso farlo funzionare su Firefox e IE9 dove sto ottenendo questo:

inserisci la descrizione dell'immagine qui

.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; } 
     

Select steam

Hai provato qualcosa del genere:

 .styled-select select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; } 

Non ho testato, ma dovrebbe funzionare.

EDIT : sembra che Firefox non supporta questa funzione fino alla versione 35 ( leggi di più qui )

C’è una soluzione qui , dai un’occhiata a jsfiddle su quel post.

Ecco una soluzione elegante che utilizza uno span per mostrare il valore.

Il layout è così:

 

JsFiddle

Lavorare con una sola class:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; } 

http://jsfiddle.net/qhCsJ/4120/

Ho impostato una select con una freccia personalizzata simile alla risposta di Julio, tuttavia non ha una larghezza impostata e utilizza un svg come immagine di sfondo. ( arrow_drop_down dalle icone di materiale- arrow_drop_down )

 select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; } 

inserisci la descrizione dell'immagine qui

Se ti serve anche per lavorare in IE, aggiorna la freccia svg a base64 e aggiungi quanto segue:

 select::-ms-expand { display: none; } background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+); 

Ciò funzionerebbe bene specialmente per chi utilizza Bootstrap, testato nelle ultime versioni del browser:

 select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ } 
  

Controlla questo È hacky, semplice come quello:

  • Imposta -prefix-appearance none per rimuovere gli stili
  • Usa il text-indent per “spingere” il contenuto un po ‘a destra
  • Infine, imposta l’ text-overflow una stringa vuota. Tutto ciò che va oltre la sua larghezza diventerà … niente! E questo include la freccia.

Ora sei libero di disegnarlo come vuoi 🙂

Ecco il mio esempio di jsfiddle: http://jsfiddle.net/AEt5k/1/

Modella l’etichetta con CSS e usa gli eventi del puntatore:

  

e il relativo CSS è

 label:after { content:'\25BC'; display:inline-block; color:#000; background-color:#fff; margin-left:-17px; /* remove the damn :after space */ pointer-events:none; /* let the click pass trough */ } 

Ho appena usato una freccia giù qui, ma puoi impostare un blocco con un’immagine di sfondo. Ecco un brutto campione di violino: https://jsfiddle.net/1rofzz89/

Funziona su tutti i browser:

 select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ background-position-x: 244px; }