Rimuovi Seleziona freccia su IE

Ho selezionato l'elemento, voglio rimuovere la freccia, quindi posso aggiungere un'altra icona .. Posso farlo per Firefox Safari e Chrome, ma questo non ha funzionato su IE9 .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

VEDI violino su IE9 . tutto ciò di cui ho bisogno è rimuovere la freccia in ie9 Rispondi JSFIDDLE.

In IE9, è possibile con un semplice hack come consigliato da @Spudley. Dal momento che hai personalizzato l'altezza e la larghezza del div e seleziona, devi cambiare div:beforeCSS per abbinare il tuo.

Nel caso in cui sia IE10, è possibile utilizzare sotto css3

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

Tuttavia, se sei interessato al plugin jQuery, prova Chosen.jso puoi crearne uno tuo in js.

Vorrei suggerire la mia soluzione che puoi trovare in questo repository GitHub . Questo funziona anche per IE8 e IE9 con una freccia personalizzata che proviene da un carattere icona.

Esempi di menu a discesa Cross Browser personalizzato in azione: selezionali con tutti i browser per visualizzare la funzionalità cross-browser.

Comunque, iniziamo con i browser moderni e poi vedremo la soluzione per quelli più vecchi.

Freccia a discesa per Chrome, Firefox, Opera, Internet Explorer 10+

Per questi browser, è facile impostare la stessa immagine di sfondo per il menu a discesa per avere la stessa freccia.

Per fare ciò, è necessario ripristinare lo stile predefinito del browser per il selecttag e impostare nuove regole di sfondo (come suggerito prima).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

Le appearanceregole sono impostate su none per ripristinare quelle predefinite del browser, se si desidera avere lo stesso aspetto per ogni freccia, è necessario mantenerle in posizione.

Le backgroundregole negli esempi sono impostate con immagini in linea SVG che rappresentano frecce diverse. Sono posizionati al 98% da sinistra per mantenere un margine sul bordo destro (puoi facilmente modificare la posizione come desideri).

Al fine di mantenere il corretto comportamento tra browser, l'unica altra regola che deve essere lasciata in atto è la outline. Questa regola ripristina il bordo predefinito che appare (in alcuni browser) quando si fa clic sull'elemento. Tutte le altre regole possono essere facilmente modificate se necessario.

Freccia a discesa per Internet Explorer 8 (IE8) e Internet Explorer 9 (IE9) utilizzando Icon Font

Questa è la parte più difficile ... O forse no.

Non esiste una regola standard per nascondere le frecce predefinite per questi browser (come select::-ms-expandper IE10 +). La soluzione è nascondere la parte del menu a discesa che contiene la freccia predefinita e inserire un carattere icona a forma di freccia (o un SVG, se si preferisce) simile all'SVG utilizzato negli altri browser (vedere ilselect regola CSS per ulteriori informazioni dettagli sull'SVG in linea utilizzato).

Il primo passo è impostare una classe in grado di riconoscere il browser: questo è il motivo per cui ho usato gli IF IE condizionali all'inizio del codice. Questi IF vengono utilizzati per collegare classi specifiche al htmltag per riconoscere il browser IE precedente.

Dopodiché, ogni selectparte dell'HTML deve essere racchiusa in un div(o qualunque tag che possa avvolgere un elemento). In questo wrapper basta aggiungere la classe che contiene il carattere icona.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

In parole semplici, questo wrapper viene utilizzato per simulare il selecttag.

Per agire come un menu a discesa, il wrapper deve avere un bordo, perché nascondiamo quello che proviene da select.

Nota che non possiamo usare il selectbordo perché dobbiamo nascondere la freccia predefinita allungandola del 25% in più rispetto al wrapper. Di conseguenza il suo bordo destro non dovrebbe essere visibile perché nascondiamo questo 25% in più dalla overflow: hiddenregola applicata alselect se stesso.

Il carattere icona-freccia personalizzato viene inserito nella pseudo classe in :beforecui la regola contentcontiene il riferimento per la freccia (in questo caso è una parentesi corretta).

Mettiamo anche questa freccia in una posizione assoluta per centrarla il più possibile (se usi diversi caratteri icona, ricordati di regolarli opportunamente cambiando i valori superiore e sinistro e la dimensione del carattere).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Puoi facilmente creare e sostituire la freccia di sfondo o la freccia del carattere dell'icona, con ognuna delle quali desideri semplicemente modificandola nella background-imageregola o creando un nuovo file del carattere dell'icona da solo.

Nel caso in cui si desideri utilizzare la classe e la pseudo-classe:

.simple-control è la tua classe css

:disabled è una pseudo classe

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}