Jak usunąć domyślną ikonę strzałki z listy rozwijanej (wybierz element)?

297

Chcę usunąć strzałkę rozwijaną z <select>elementu HTML . Na przykład:

<select style="width:30px;-webkit-appearance: none;">
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    ...
</select>

Jak to zrobić w Operze, Firefox i Internet Explorer?

wprowadź opis zdjęcia tutaj

użytkownik2301515
źródło
Niektóre odpowiedzi / włamania do ukrywania go w przeglądarce Firefox - stackoverflow.com/questions/5912791/...
andyb
2
wygląd #slectType { -webkit-appearance: none; appearance: none /*menulist*/ ! ważne; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;} przeglądarki [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];
Yash
1
Możliwy duplikat strzałki Select Select w IE
Muath
Możliwy duplikat ukrywania HTML Wybierz strzałkę rozwijaną z css
Damjan Pavlica

Odpowiedzi:

382

Nie ma potrzeby hacków ani przelewów. W IE jest pseudo-element dla strzałki rozwijanej:

select::-ms-expand {
    display: none;
}
nrutas
źródło
22
ponieważ pytanie dotyczyło sposobu usunięcia strzałki rozwijanej w IE. IE9 nie ma tej funkcji, ale działa w IE10. więc jeśli nie używasz Windows XP, i tak powinieneś używać IE10. IE11 jest prawie na wyczerpaniu. Inną opcją jest brzydki hack CSS, aby ukryć rzeczywisty przycisk rozwijany i stworzyć własny.
nrutas
2
link tutaj jest brzydki hack, aby ukryć przepełnienie
nrutas
1
Działa w IE11. Gracias!
ConorLuddy
To nie działało w przeglądarce Firefox. Użyj rozwiązania Varun Rathore poniżej dla Firefoksa.
AlmostPitt,
1
dotyczy to tylko IE. oczywiście nie będzie działać w przeglądarce Firefox.
nrutas
289

Wcześniej wspomniane rozwiązania działają dobrze z Chrome, ale nie w Firefox.

Znalazłem rozwiązanie, które działa dobrze zarówno w Chrome, jak i Firefox (nie w IE). Dodaj następujące atrybuty do CSS dla SELECTelement i dostosuj margines do własnych potrzeb.

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}

Mam nadzieję że to pomoże :)

Varun Rathore
źródło
9
Ta sztuczka przestała działać w przeglądarce Firefox od wersji 31 ​​(w wersji Nightly od maja 2014). Zobaczmy, co można w międzyczasie zrobić. Ta lista, którą napisałem, ma pełne podsumowanie
João Cunha
Metoda Joäo Cunha sprawdzona i zastosowana z powodzeniem. Kiedy to sprawdzasz, nie zapomnij otworzyć linku w Firefoksie!
NoobishPro
To zadziałało dla mnie. Chciałem użyć go do wkhtmltopdf do wygenerowania pdf z HTML. Dzięki
Faisal,
187

Prosty sposób na usunięcie strzałki rozwijanej z wyboru

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}
<select>
  <option>2000</option>
  <option>2001</option>
  <option>2002</option>
</select>

Sangeet Shah
źródło
4
Właśnie użyłem appearance: noneChrome i Firefox Quantum (wersja 59 i nowsze). IE ma potrzeby prefiksy dostawców anymore .
CPHPython
2
@CPHPython Większość przeglądarek od tego komentarza nadal ma na sobie znacznik „częściowa obsługa z prefiksem” ...
Dan.
2
@CPHPython musisz mieć Autoprefixer zainstalowany w swoim projekcie, aby nieprefiks appearance: nonedziałał. Większość przeglądarek nadal potrzebuje prefiksów.
Daniel Tonon,
@DanielTonon och, być może korzystałem z takiego pakietu postcss. Nie pamiętam dokładnie, ale myślę, że sprawdziłem inspektora przeglądarki przed komentowaniem.
CPHPython
58

Spróbuj tego :

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 2px 30px 2px 2px;
    border: none;
}

JS Bin: http://jsbin.com/aniyu4/2/edit

Jeśli używasz Internet Explorera:

select {
    overflow:hidden;
    width: 120%;
}

Lub możesz użyć Choosen: http://harvesthq.github.io/chosen/

EpokK
źródło
1
Czy przetestowałeś JSBin w IE i Firefox? Nadal widzę wbudowaną strzałkę rozwijania w obu.
Martin Smith
Sprawdź u Wybranych, myślę, że to najlepszy wybór.
EpokK
„Jeśli korzystasz z przeglądarki Internet Explorer”? Musisz wziąć pod uwagę duży procent populacji, która NIE korzysta z IE i zaspokaja ich niezależnie od tego
Danny Mahoney
Statystyki użytkowników naszych witryn są następujące: 5,21% IE lub 2,37% Edge
nu everest
„Jeśli używasz IE” byłoby poprawne, lepiej byłoby powiedzieć „Jeśli potrzebujesz wesprzeć IE”, ale w dzisiejszych czasach Twoja technologia powinna być odpowiednio ukierunkowana na odbiorców, jeśli prowadzisz sieć witryna ukierunkowana na programistów, więc wątpię, abyś musiał obsługiwać JAKIEKOLWIEK wersje IE.
Brandito,
17

Spróbuj tego:

HTML:

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

CSS:

.customselect {
    width: 70px;
    overflow: hidden;
}

.customselect select {
   width: 100px;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
Luke Kalyan Brata Sarker
źródło
15

Wypróbuj to, działa dla mnie

<style>
    select{
        border: 0 !important;  /*Removes border*/
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        text-overflow:'';
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/
    }
    select::-ms-expand {
        display: none;
    }
    .select-wrapper
    {
        padding-left:0px;
        overflow:hidden;
    }
</style>
    
<div class="select-wrapper">
     <select> ... </select>
</div>

Nie możesz się ukryć, ale używając ukrytego przepełnienia możesz faktycznie sprawić, że zniknie.

Mahesh Shitole
źródło
6

Chciałem tylko uzupełnić wątek. Aby być bardzo jasnym, nie działa to w IE9, jednak możemy to zrobić małą sztuczką css.

<div class="customselect">
    <select>
    <option>2000</option>
    <option>2001</option>
    <option>2002</option>
    </select>
</div>

.customselect {
    width: 80px;
    overflow: hidden;
   border:1px solid;
}

.customselect select {
   width: 100px;
   border:none;
  -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
}
sun2
źródło
5

Jak odpowiedziałem w Usuń Wybierz strzałkę w IE

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

.simple-control jest twoją klasą 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;
}
Tejasvi Hegde
źródło
4
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;

}

Mitul
źródło
2

Nie możesz tego zrobić dzięki w pełni funkcjonalnej obsłudze wielu przeglądarek.

Załóżmy, że weźmy div 50 pikseli i umieść wybraną ikonę rozwijaną po prawej stronie

Teraz w tym div dodaj znacznik select o szerokości może 55 pikseli (coś więcej niż szerokość pojemnika)

Myślę, że dostaniesz to, czego chcesz.

Jeśli nie chcesz, aby ikona upuszczania była widoczna po prawej stronie, po prostu wykonaj wszystkie kroki oprócz przesuwania obrazu po prawej stronie. Ustaw kontur: 0 na fokus dla wybranego znacznika. Otóż ​​to

Kaustav Banerjee
źródło
1
Nie mogę uzyskać pomocy z tych wskazówek. Czy ktoś może podać tutaj odpowiedni kod? Dziękuję Ci.
user2301515
2

istnieje biblioteka o nazwie DropKick.js, która zastępuje zwykłe menu wyboru HTML / CSS, dzięki czemu można w pełni stylizować i kontrolować je za pomocą javascript. http://dropkickjs.com/

nrutas
źródło
2

Działa dla wszystkich przeglądarek i wszystkich wersji:

JS

jQuery(document).ready(function () {    
    var widthOfSelect = $("#first").width();
    widthOfSelect = widthOfSelect - 13;
    //alert(widthOfSelect);
    jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});

HTML

<select class="first" id="first">
  <option>option1</option>
  <option>option2</option>
  <option>option3</option>
</select>
SK.
źródło