Wie entferne ich das Standardpfeilsymbol aus einer Dropdown-Liste (Element auswählen)?

297

Ich möchte den Dropdown-Pfeil aus einem HTML- <select>Element entfernen . Zum Beispiel:

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

Wie geht das in Opera, Firefox und Internet Explorer?

Geben Sie hier die Bildbeschreibung ein

user2301515
quelle
Einige Antworten / Hacks zum Verstecken in Firefox - stackoverflow.com/questions/5912791/…
andyb
2
Aussehen #slectType { -webkit-appearance: none; appearance: none /*menulist*/ ! wichtig; 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;} Durchsucht [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];
Yash
1
Mögliches Duplikat von Remove Select Pfeil auf IE
Muath
Mögliches Duplikat von HTML verstecken Dropdown-Pfeil mit CSS auswählen
Damjan Pavlica

Antworten:

382

Hacks oder Überlauf sind nicht erforderlich. Es gibt ein Pseudoelement für den Dropdown-Pfeil im IE:

select::-ms-expand {
    display: none;
}
nrutas
quelle
22
weil die Frage war, wie man den Dropdown-Pfeil im IE entfernt. IE9 verfügt nicht über diese Funktionalität, dies funktioniert jedoch in IE10. Wenn Sie also nicht Windows XP verwenden, sollten Sie trotzdem IE10 verwenden. IE11 ist fast raus. Eine andere Option ist ein hässlicher CSS-Hack, mit dem Sie die eigentliche Dropdown-Schaltfläche ausblenden und Ihre eigenen erstellen können.
Nrutas
2
Link hier ist der hässliche Hack, um den Überlauf zu verbergen
nrutas
1
Funktioniert in IE11. Gracias!
ConorLuddy
Dies hat in Firefox nicht funktioniert. Verwenden Sie die unten stehende Lösung von Varun Rathore für Firefox.
Fast Pitt
1
Dies ist nur für IE. Natürlich funktioniert es in Firefox nicht.
Nrutas
289

Die zuvor genannten Lösungen funktionieren gut mit Chrom, jedoch nicht mit Firefox.

Ich habe eine Lösung gefunden , die sowohl in Chrome als auch in Firefox gut funktioniert (nicht im IE). Fügen Sie dem CSS die folgenden Attribute für Ihr SELECT-Element hinzu und passen Sie den Rand oben an Ihre Anforderungen an.

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

Hoffe das hilft :)

Varun Rathore
quelle
9
Dieser Trick funktioniert ab Version 31 nicht mehr in Firefox (in Nightly Build ab Mai 2014). Mal sehen, was in der Zwischenzeit gemacht werden kann. Dieser Kern, den ich geschrieben habe, hat den vollständigen Überblick: gist.github.com/joaocunha/6273016
João Cunha
Die Methode von Joäo Cunha wurde überprüft und erfolgreich angewendet. Vergessen Sie beim Auschecken nicht, den Link in Firefox zu öffnen!
NoobishPro
Es hat bei mir funktioniert. Ich wollte es für wkhtmltopdf verwenden, um PDF aus HTML zu generieren. Danke
Faisal
187

Einfache Möglichkeit, den Dropdown-Pfeil aus der Auswahl zu entfernen

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
quelle
4
Ich habe gerade appearance: nonefür Chrome und Firefox Quantum (v59 und höher) verwendet. Dh keine Herstellerpräfixe mehr erforderlich .
CPHPython
2
@CPHPython Die meisten Browser ab diesem Kommentar haben noch ein "teilweise Unterstützung mit Präfix" -Tag auf ihnen ...
Dan
2
@CPHPython Sie müssen Autoprefixer in Ihrem Projekt installiert haben, damit das Unfixed appearance: nonefunktioniert. Die meisten Browser benötigen noch die Präfixe.
Daniel Tonon
@ DanielTonon Oh, vielleicht habe ich so ein Postcss-Paket verwendet. Ich erinnere mich nicht genau, aber ich glaube, ich habe vor dem Kommentieren den Inspektor des Browsers überprüft.
CPHPython
58

Versuche dies :

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

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

Wenn Sie den Internet Explorer verwenden:

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

Oder Sie können Choosen verwenden: http://harvesthq.github.io/chosen/

EpokK
quelle
1
Haben Sie Ihren JSBin in IE und Firefox getestet ? Ich sehe immer noch den eingebauten Dropdown-Pfeil in beiden.
Martin Smith
Fragen Sie bei Choosen nach, ich denke, es ist die beste Wahl.
EpokK
"Wenn Sie den Internet Explorer verwenden"? Sie müssen den großen Prozentsatz der Bevölkerung berücksichtigen, die IE verwenden und für sie unabhängig sorgen
Danny Mahoney
Die Benutzerstatistiken unserer Websites lauten wie folgt: 5,21% IE oder 2,37% Edge
nu everest
"Wenn Sie IE verwenden" wäre richtig, es wäre besser geeignet zu sagen "Wenn Sie IE unterstützen müssen", aber heutzutage sollte Ihre Technologie richtig auf Ihre Zielgruppe ausgerichtet sein, wenn Sie ein Web betreiben Ich bezweifle, dass Sie JEDE Version des IE unterstützen müssen.
Brandito
17

Versuche dies:

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
quelle
15

Versuchen Sie dies, es funktioniert für mich,

<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>

Sie können sich nicht verstecken, aber wenn Sie den Überlauf versteckt verwenden, können Sie ihn tatsächlich verschwinden lassen.

Mahesh Shitole
quelle
6

Ich wollte nur den Thread vervollständigen. Um ganz klar zu sein, funktioniert dies in IE9 nicht, aber wir können es mit einem kleinen CSS-Trick tun.

<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
quelle
5

Wie ich in Remove Select Pfeil auf IE antwortete

Falls Sie die Klasse und die Pseudoklasse verwenden möchten:

.simple-control ist deine CSS-Klasse

:disabled ist eine Pseudoklasse

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
quelle
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
quelle
2

Sie können dies nicht mit einer voll funktionsfähigen Cross-Browser-Unterstützung tun.

Nehmen Sie einen Div von 50 Pixeln an und schweben Sie ein gewünschtes Dropdown-Symbol Ihrer Wahl rechts davon

Fügen Sie nun innerhalb dieses Bereichs das Auswahl-Tag mit einer Breite von möglicherweise 55 Pixel hinzu (etwas mehr als die Breite des Containers).

Ich denke, Sie werden bekommen, was Sie wollen.

Wenn Sie rechts kein Ablagesymbol möchten, führen Sie einfach alle Schritte aus, außer das Bild rechts zu schweben. Umriss festlegen: 0 im Fokus für das Auswahl-Tag. das ist es

Kaustav Banerjee
quelle
1
Ich kann keine Hilfe von diesen Hinweisen bekommen. Kann hier jemand einen angemessenen Code angeben? Danke dir.
user2301515
2

Es gibt eine Bibliothek namens DropKick.js, die die normalen Auswahl-Dropdowns durch HTML / CSS ersetzt, sodass Sie sie vollständig mit Javascript formatieren und steuern können. http://dropkickjs.com/

nrutas
quelle
2

Funktioniert für alle Browser und alle Versionen:

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.
quelle