Usuń strzałkę wyboru w IE


126

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.


1
To może w ogóle nie być możliwe. Przeglądarki (zwłaszcza IE) tradycyjnie niechętnie oferują rozszerzone opcje stylizacji swoich widżetów.
Pekka

Nie możesz tego zrobić za pomocą samego CSS, ale uważam, że istnieją biblioteki JS do stylizacji formularzy, które to potrafią. Google powinien wiedzieć.
Mark Simpson

@Alberto to pytanie zostało udzielone przed 2 latami :) jeśli uważasz, że masz odpowiedź, możesz ją wstawić
Muath

Odpowiedzi:


322

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.


2
@Moath Howari Zmodyfikowałem cię skrzypce, sprawdź to w IE9 jsfiddle.net/kBWYd/6
Praveen

@PraveenJeganathan Selectbox ma również jeden błąd. Po kliknięciu prawego rogu listy rozwijanej nie działa. Czy możemy coś z tym zrobić?
Manjit Singh

@Praveen jest to, że prawa strona nie jest klikalna.
Tom Roggero

1
@ManjitSingh & Tom Roggero - Jest to dość hacky ale jeśli trzeba, że przestrzeń klikalne można zastąpić display: none;z opacity: .01. Będzie prawie niemożliwe, aby go zobaczyć, ale nadal będzie można go kliknąć.
chapeljuice

1
@MarcRoussel w oparciu o to skrzypce można to zapisać tak, jakby select:hover::-ms-expandstan najechania na pseudoelement był taki, jak wspomniano selector:state::pseudo. Nie mogłem przetestować z IE, ale warto spróbować :)
Praveen

6

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.


4

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;
}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.