Varsayılan ok simgesini bir açılır listeden nasıl kaldırırım (öğe seç)?

Bir HTML <select>öğesinden açılır oku kaldırmak istiyorum . Örneğin:

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

Opera, Firefox ve Internet Explorer'da nasıl yapılır?

Kesmeye veya taşmaya gerek yok. IE'de açılır ok için bir sözde öğe var:

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

Daha önce bahsedilen çözümler krom ile iyi çalışır ancak Firefox'ta çalışmaz.

Hem Chrome'da hem de Firefox'ta (IE'de değil) iyi çalışan bir Çözüm buldum . SELECTelement ürününüz için CSS'ye aşağıdaki özellikleri ekleyin ve kenar boşluğunu üst tarafını ihtiyaçlarınıza göre ayarlayın.

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

Bu yardımcı olur umarım :)

Açılır oku seçimden kaldırmanın basit yolu

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>

Bunu dene :

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

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

Internet Explorer kullanıyorsanız:

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

Veya Choosen'ı kullanabilirsiniz: http://harvesthq.github.io/chosen/

Bunu dene:

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

Bunu deneyin benim için işe yarıyor,

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

Gizleyemezsiniz ama taşma gizli kullanarak aslında kaybolmasını sağlayabilirsiniz.

Sadece ipliği tamamlamak istedim. Çok açık olmak gerekirse bu IE9'da işe yaramaz, ancak küçük css hile ile yapabiliriz.

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

IE'de Kaldır Seç okunda yanıtladığım gibi

Sınıfı ve sözde sınıfı kullanmak istiyorsanız:

.simple-control css sınıfın mı

:disabled sözde sınıf

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;

}

Bunu tamamen işlevsel bir çapraz tarayıcı desteği ile yapamazsınız.

50 piksellik bir bölmeyi seçmeyi deneyin ve bunun sağındaki istediğiniz bir açılır simgeyi kaydırın

Şimdi bu div içinde 55 piksellik genişliğe sahip seçim etiketini ekleyin (kabın genişliğinden başka bir şey olabilir)

Bence istediğini alacaksın.

Sağda herhangi bir damla simgesi istemiyorsanız, görüntüyü sağda yüzmek hariç tüm adımları uygulayın. Anahat belirle: Seçilen etiket için odakta 0 bu kadar

javascript ile tam stil ve kontrol edebilmeniz için normal seçim açılır listelerini HTML / CSS ile değiştiren DropKick.js adlı bir kütüphane var. http://dropkickjs.com/

Tüm tarayıcılar ve tüm sürümler için çalışır:

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>