Hapus Pilih panah pada IE

Saya memiliki elemen pilih, saya ingin menghapus panah, lalu saya dapat menambahkan ikon lainnya .. saya bisa melakukannya untuk Firefox Safari dan Chrome, tetapi ini tidak berfungsi pada IE9 .

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

LIHAT Fiddle di IE9 . semua yang saya butuhkan adalah menghapus panah di ie9 Tolong jawab JSFIDDLE.

Di IE9, dimungkinkan dengan retasan murni seperti yang disarankan oleh @Spudley. Karena Anda telah menyesuaikan tinggi dan lebar div dan memilih, Anda perlu mengubah div:beforecss agar sesuai dengan milik Anda.

Dalam hal jika itu adalah IE10 maka menggunakan css3 di bawah ini adalah mungkin

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

Namun jika Anda tertarik dengan plugin jQuery, coba Chosen.jsatau Anda dapat membuatnya sendiri di js.

Saya akan menyarankan solusi saya yang dapat Anda temukan di repo GitHub ini . Ini juga berfungsi untuk IE8 dan IE9 dengan panah kustom yang berasal dari font ikon.

Contoh Drop-down Custom Cross Browser dalam aksi: periksa dengan semua browser Anda untuk melihat fitur cross-browser.

Bagaimanapun, mari kita mulai dengan browser modern dan kemudian kita akan melihat solusi untuk yang lebih lama.

Panah Drop-down untuk Chrome, Firefox, Opera, Internet Explorer 10+

Untuk browser ini, mudah untuk mengatur gambar latar belakang yang sama untuk drop-down agar memiliki panah yang sama.

Untuk melakukannya, Anda harus mengatur ulang gaya default browser untuk selecttag dan menetapkan aturan latar belakang baru (seperti yang disarankan sebelumnya).

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

The appearanceaturan ditetapkan untuk tidak me-reset yang browser default, jika Anda ingin memiliki aspek yang sama untuk setiap panah, Anda harus menjaga mereka di tempat.

The backgroundaturan dalam contoh ditetapkan dengan SVG gambar inline yang mewakili anak panah yang berbeda. Mereka diposisikan 98% dari kiri untuk menjaga margin di perbatasan kanan (Anda dapat dengan mudah mengubah posisi sesuai keinginan).

Untuk menjaga perilaku cross-browser yang benar, satu-satunya aturan lain yang harus dibiarkan ada adalah outline. Aturan ini mengatur ulang batas default yang muncul (di beberapa browser) ketika elemen diklik. Semua aturan lainnya dapat dengan mudah dimodifikasi jika diperlukan.

Panah Drop-down untuk Internet Explorer 8 (IE8) dan Internet Explorer 9 (IE9) menggunakan Icon Font

Ini bagian yang lebih sulit ... Atau mungkin juga tidak.

Tidak ada aturan standar untuk menyembunyikan panah default untuk browser ini (seperti select::-ms-expanduntuk IE10 +). Solusinya adalah menyembunyikan bagian drop-down yang berisi panah default dan memasukkan font ikon panah (atau SVG, jika Anda suka) mirip dengan SVG yang digunakan di browser lain (lihat selectaturan CSS untuk lebih rincian tentang SVG inline yang digunakan).

Langkah pertama adalah menetapkan kelas yang dapat mengenali browser: ini adalah alasan mengapa saya telah menggunakan IE IFs bersyarat di awal kode. IF ini digunakan untuk melampirkan kelas-kelas tertentu pada htmltag untuk mengenali browser IE yang lebih lama.

Setelah itu, setiap selectHTML harus dibungkus oleh div(atau tag apa pun yang dapat membungkus suatu elemen). Pada pembungkus ini cukup tambahkan kelas yang berisi font ikon.

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

Dengan kata mudah, pembungkus ini digunakan untuk mensimulasikan selecttag.

Untuk bertindak seperti drop-down, pembungkus harus memiliki batas, karena kami menyembunyikan yang berasal dari select.

Perhatikan bahwa kita tidak dapat menggunakan selectperbatasan karena kita harus menyembunyikan panah default yang memperpanjang 25% lebih dari pembungkus. Akibatnya batas kanannya tidak boleh terlihat karena kita menyembunyikan 25% ini lebih banyak dengan overflow: hiddenaturan yang diterapkan pada selectdirinya sendiri.

Ikon-ikon panah khusus ditempatkan di kelas pseudo di :beforemana aturan contentberisi referensi untuk panah (dalam hal ini adalah tanda kurung yang benar).

Kami juga menempatkan panah ini pada posisi absolut untuk memusatkannya sebanyak mungkin (jika Anda menggunakan font ikon yang berbeda, ingatlah untuk menyesuaikannya secara tepat dengan mengubah nilai atas dan kiri serta ukuran font).

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

Anda dapat dengan mudah membuat dan mengganti panah latar belakang atau panah font ikon, dengan setiap panah yang Anda inginkan cukup mengubahnya dalam background-imageaturan atau membuat file font ikon baru sendiri.

Jika Anda ingin menggunakan kelas dan pseudo-class:

.simple-control adalah kelas css Anda

:disabled adalah kelas semu

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

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