IE'de Seçim okunu kaldırın

Select elementim var, oku kaldırmak istiyorum, sonra başka bir simge ekleyebilirim .. Bunu Firefox Safari ve Chrome için yapabilirim, ancak bu IE9'da çalışmadı .

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

GDA Fiddle üzerinde IE9 . tüm ihtiyacım olan şey ie9'daki oku kaldırmaktır Lütfen JSFIDDLE cevabı.

IE9'da, @ Spudley tarafından tavsiye edildiği gibi tamamen bir hack ile mümkündür . Div ve seçiminin yüksekliğini ve genişliğini özelleştirdiğiniz için, div:beforecss'yi sizinkiyle eşleşecek şekilde değiştirmeniz gerekir .

IE10 ise, aşağıdaki css3'ü kullanmak mümkündür

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

Ancak jQuery eklentisiyle ilgileniyorsanız, deneyin Chosen.jsveya js'de kendinizinkini oluşturabilirsiniz.

Bu GitHub deposunda bulabileceğiniz çözümümü öneririm . Bu , bir simge yazı tipinden gelen özel bir okla IE8 ve IE9 için de çalışır .

Özel Çapraz Tarayıcı Açılır Menüsü örnekleri : Çapraz tarayıcı özelliğini görmek için tüm tarayıcılarınızda bunları kontrol edin.

Her neyse, modern tarayıcılarla başlayalım ve sonra eski tarayıcılar için çözümü göreceğiz.

Chrome, Firefox, Opera, Internet Explorer 10+ için Açılır Ok

Bu tarayıcılar için , aynı oka sahip olmak için açılır menü için aynı arka plan resmini ayarlamak kolaydır .

Bunu yapmak için, tarayıcının selectetiket için varsayılan stilini sıfırlamanız ve yeni arka plan kuralları belirlemeniz gerekir (daha önce önerildiği gibi).

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

appearanceKurallar her okun aynı yönü yapmak istiyorsanız, siz yerde tutmalı, tarayıcılar varsayılan olanları sıfırlamak için hiçbiri ayarlanır.

backgroundÖrneklerde kurallar farklı okları temsil SVG satır içi görüntülerle ayarlanır. Sağ kenarda bir miktar marj tutmak için soldan% 98 oranında konumlandırılmışlardır (konumu istediğiniz gibi kolayca değiştirebilirsiniz).

Doğru tarayıcılar arası davranışını sürdürmek için, yerinde bırakılması gereken diğer tek kural outline. Bu kural, öğe tıklandığında görünen (bazı tarayıcılarda) varsayılan sınırı sıfırlar. Diğer tüm kurallar, gerekirse kolayca değiştirilebilir.

Simge Yazı Tipini kullanarak Internet Explorer 8 (IE8) ve Internet Explorer 9 (IE9) için Açılır Ok

Bu en zor kısım ... Ya da belki değil.

Bu tarayıcılar için varsayılan okları gizlemek için standart bir kural yoktur ( select::-ms-expandIE10 + için olduğu gibi ). Çözüm, açılır listenin varsayılan oku içeren bölümünü gizlemek ve diğer tarayıcılarda kullanılan SVG'ye benzer bir ok simgesi yazı tipi (veya isterseniz bir SVG) eklemektir ( selectdaha fazlası için CSS kuralına bakın) kullanılan satır içi SVG hakkında ayrıntılar).

İlk adım, tarayıcıyı tanıyabilen bir sınıf belirlemektir: kodun başında koşullu IE IF'leri kullanmamın nedeni budur. Bu IF'ler html, eski IE tarayıcısını tanımak için belirli sınıfları etikete eklemek için kullanılır .

Bundan sonra select, HTML'deki her divşeyin bir (veya bir öğeyi sarabilecek herhangi bir etiket) ile sarmalanması gerekir . Bu sarmalayıcıda, simge yazı tipini içeren sınıfı ekleyin.

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

Basit bir deyişle, bu sarmalayıcı selectetiketi simüle etmek için kullanılır .

Bir açılır pencere gibi davranmak için, sarmalayıcıda bir kenarlık olması gerekir, çünkü select.

selectSınırı kullanamayacağımıza dikkat edin, çünkü varsayılan oku gizlemek zorunda olduğumuz için onu sarmalayıcıdan% 25 daha fazla uzatmalıyız. Dolayısıyla sağ kenarlığı görünmemelidir çünkü kendisine overflow: hiddenuygulanan kuralla bu% 25 daha fazla saklıyoruz select.

Özel ok simgesi-yazı tipi, :beforekuralın contentok başvurusunu içerdiği sözde sınıfa yerleştirilir (bu durumda, bu bir sağ parantezdir).

Ayrıca bu oku olabildiğince ortalamak için mutlak bir konuma yerleştiriyoruz (farklı simge yazı tiplerini kullanıyorsanız, üst ve sol değerleri ve yazı tipi boyutunu değiştirerek bunları uygun şekilde ayarlamayı unutmayın).

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

Arka plan okunu veya simge yazı tipi okunu kolayca oluşturabilir ve bunları background-imagekuralda değiştirerek veya kendiniz yeni bir simge yazı tipi dosyası oluşturarak istediğiniz her biriyle değiştirebilirsiniz .

Sınıfı ve sözde sınıfı kullanmak istemeniz durumunda:

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