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

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?

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

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

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

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>

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/

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

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.

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

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

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;

}

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

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/

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>