So entfernen Sie den Standard Pfeil-Symbol aus einer Auswahlliste (select-element)?

Den zuvor genannten Lösungen funktioniert gut mit Google chrome aber nicht in Firefox.

Fand ich eine Lösung, die gut funktioniert sowohl in Chrome und Firefox(nicht im IE). Fügen Sie die folgenden Attribute der CSS-Datei für Ihr SELECTelement und anpassen der margin-top, um Ihre Bedürfnisse anzupassen.

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

Hoffe, das hilft 🙂

Versuchen Sie 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 Internet Explorer verwenden :

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

Oder Sie verwenden können, Gewählt : http://harvesthq.github.io/chosen/

Versuchen Sie dies, es funktioniert für mich,

HTML:

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

Können Sie nicht verbergen, aber mit overflow hidden können Sie tatsächlich machen es verschwinden.

Als ich antwortete Entfernen, Wählen Sie den Pfeil auf der DH

In Fall, dass Sie wollen, um die Klasse zu verwenden und die pseudo-Klasse:

.simple-control ist Ihre css-Klasse

:disabled ist pseudo-Klasse

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

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

Können Sie nicht mit einem voll funktionsfähigen cross-browser-Unterstützung.

Versuchen Sie, eine div von 50 Pixeln angenommen und schwebt gewünschte drop-down-Symbol Ihrer Wahl auf der rechten Seite dieser

Nun innerhalb dieses div-Element, fügen Sie der select-tag mit einer Breite von 55 Pixel vielleicht (etwas mehr als die Breite des Containers)

Denke ich, werden Sie bekommen, was Sie wollen.

In den Fall, Sie wollen nicht, dass die drop-icon auf der rechten Seite, Mach einfach alle Schritte mit Ausnahme von floating-das Bild auf der rechten Seite. Set outline:0 auf die Konzentration für das select-tag. das ist es

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>