Usuń strzałkę wyboru w IE

Mam wybrany element, chcę usunąć strzałkę, mogę dodać inną ikonę .. Mogę to zrobić dla Firefox Safari i Chrome, ale to nie działa w 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;
 }

ZOBACZ Fiddle na IE9 . wszystko, czego potrzebuję, to usunąć strzałkę w ie9 Proszę o odpowiedź JSFIDDLE.

W IE9 jest to możliwe dzięki hackowaniu, zgodnie z zaleceniami @Spudley. Ponieważ dostosowałeś wysokość i szerokość div i wybierzesz, musisz zmienić div:beforecss, aby pasował do twojego.

W przypadku, gdy jest to IE10, możliwe jest użycie poniższego css3

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

Jeśli jednak interesuje Cię wtyczka jQuery, spróbuj Chosen.jslub możesz stworzyć własną wtyczkę w js.

Sugerowałbym moje rozwiązanie, które można znaleźć w tym repozytorium GitHub . Działa to również dla IE8 i IE9 z niestandardową strzałką pochodzącą z czcionki ikony.

Przykłady niestandardowych menu rozwijanych między przeglądarkami w akcji: sprawdź je we wszystkich przeglądarkach, aby zobaczyć funkcję różnych przeglądarek.

W każdym razie zacznijmy od nowoczesnych przeglądarek, a potem zobaczymy rozwiązanie dla starszych.

Rozwijana strzałka dla Chrome, Firefox, Opera, Internet Explorer 10+

W tych przeglądarkach łatwo jest ustawić ten sam obraz tła dla listy rozwijanej , aby mieć tę samą strzałkę.

Aby to zrobić, musisz zresetować domyślny styl przeglądarki dla selecttagu i ustawić nowe reguły tła (jak sugerowano wcześniej).

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;
    ...
}

Te appearancezasady są ustawione na none zresetować przeglądarek domyślnych, jeśli chcesz mieć taki sam wygląd dla każdej strzałki, należy przechowywać je w miejscu.

Te backgroundzasady w przykładach są ustawione z SVG inline obrazów, które reprezentują różne strzały. Są ustawione w 98% od lewej, aby zachować pewien margines do prawej krawędzi (możesz łatwo zmodyfikować pozycję, jak chcesz).

Aby zachować prawidłowe działanie różnych przeglądarek, jedyną inną regułą, którą należy pozostawić, jest outline. Ta reguła resetuje domyślne obramowanie, które pojawia się (w niektórych przeglądarkach) po kliknięciu elementu. W razie potrzeby wszystkie pozostałe reguły można łatwo zmodyfikować.

Rozwijana strzałka dla Internet Explorer 8 (IE8) i Internet Explorer 9 (IE9) przy użyciu Icon Font

To jest trudniejsza część ... A może nie.

Nie ma standardowej reguły ukrywania domyślnych strzałek w tych przeglądarkach (np. W select::-ms-expandIE10 +). Rozwiązaniem jest ukrycie części listy rozwijanej zawierającej domyślną strzałkę i wstawienie czcionki ikony strzałki (lub SVG, jeśli wolisz) podobnej do SVG używanej w innych przeglądarkach (więcej informacji znajdziesz w selectregule CSS szczegółowe informacje na temat zastosowanego wbudowanego pliku SVG).

Pierwszym krokiem jest ustawienie klasy, która rozpoznaje przeglądarkę: to jest powód, dla którego użyłem warunkowych IF IE na początku kodu. Te IF służą do dołączania określonych klas do htmltagu, aby rozpoznać starszą przeglądarkę IE.

Następnie każdy selectelement HTML musi być opakowany div(lub jakimkolwiek znacznikiem, który może otoczyć element). W tym opakowaniu wystarczy dodać klasę zawierającą czcionkę ikony.

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

Mówiąc prosto, to opakowanie służy do symulacji selecttagu.

Aby zachowywać się jak lista rozwijana, opakowanie musi mieć obramowanie, ponieważ ukrywamy ten, który pochodzi z select.

Zauważ, że nie możemy użyć selectobramowania, ponieważ musimy ukryć domyślną strzałkę wydłużając ją o 25% bardziej niż opakowanie. W konsekwencji jego prawa krawędź nie powinna być widoczna, ponieważ ukrywamy to 25% więcej przez overflow: hiddenregułę zastosowaną do selectsamej siebie.

Niestandardowa ikona-font strzałki jest umieszczana w pseudoklasie, w :beforektórej reguła contentzawiera odniesienie do strzałki (w tym przypadku jest to prawy nawias).

Umieszczamy również tę strzałkę w absolutnej pozycji, aby wyśrodkować ją tak bardzo, jak to możliwe (jeśli używasz różnych czcionek ikon, pamiętaj, aby dostosować je odpowiednio, zmieniając górne i lewe wartości oraz rozmiar czcionki).

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

Możesz łatwo utworzyć i zastąpić strzałkę w tle lub strzałkę czcionki ikony, z każdą, którą chcesz, po prostu zmieniając ją w background-imageregule lub samodzielnie tworząc nowy plik czcionki ikony.

Jeśli chcesz użyć klasy i pseudoklasy:

.simple-control to Twoja klasa CSS

:disabled jest pseudoklasą

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

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