چطور به تگ <select> آبشاری یا dropdown استایل CSS بدیم؟

آیا راه حلی وجود داره که با استفاده از اون بتونم به تگ <select> آبشاری یا همون dropdown استایل css بدم؟

لطفا اگر کسی راه حلی داره برای زبان CSS ارائه کنه. چون من تحقیق کردم و متوجه شدم که با جاوا اسکریپت هم این امکان وجود داره.

در ضمن می خواستم این کد در مرورگرهای Internet Explorer و Firefox و Chrome و Safari کار کنه.

برای پاسخ به این سوال شما راه حل زیر وجود دارد:

بکارگیری دستور appearance: none

برای پنهان کردن آیکن پیشفرض فلش که در کنار لیست آبشاری نمایش داده می شود می توان از دستور appearance به صورت زیر استفاده کرد. فقط توجه کنید که اگر می خواهید آیکن دیگری استفاده کنید، آدرس تصویر آن را باید در قسمت background-image قرار دهید:

select {
   -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;       /* این دستور فلش را حذف می کند */
   background-image: url(...);   /* در این خط باید تصویر آیکن خود را لود کنید */
}

مرورگرهایی که در این روش پشتیبانی می شوند عبارتند از اینترنت اسکپلورر ۱۱ و فایر فاکس ۳۴ به بالا. در مرورگرهای کروم و سافاری نیز این امکان برقرار است.

برای مرورگرهای اینترنت اسکپلورر ۱۰ و پایین تر می توانید از دستور زیر استفاده کنید:

select::-ms-expand { 
    display: none; /* مخفی کردن فلش در نسخه ie10 و ie11 */
}

اگر تحت هر شرایطی دستورهای فوق در اینترنت اکسپلورر جواب نداد از این دستور استفاده کنید:

/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    } 
}

این روش به نسبت سایر روش ها ساده و قابل درک است. از طرفی در حال حاضر مرورگرها بسیار حرفه ای و پیشرفته شده اند و نگرانی ای بابت آن وجود ندارد.