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

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?

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

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

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

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>

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/

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

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.

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

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

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;

}}

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

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/

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>