আমি আমার সমাধানটির পরামর্শ দেব যা আপনি এই গিটহাব রেপোতে খুঁজে পেতে পারেন ।
এটি আইকন ফন্ট থেকে আসা একটি কাস্টম তীর সহ আইই 8 এবং আই 9 এর জন্যও কাজ করে ।
কাস্টম ক্রস ব্রাউজারের ক্রিয়া ড্রপ-ডাউনের উদাহরণ : ক্রস ব্রাউজারের বৈশিষ্ট্য দেখতে আপনার সমস্ত ব্রাউজারের সাথে সেগুলি পরীক্ষা করুন।
যাইহোক, আসুন আধুনিক ব্রাউজারগুলি দিয়ে শুরু করা যাক এবং তারপরে আমরা পুরানোগুলির জন্য সমাধানটি দেখতে পাব।
ক্রোম, ফায়ারফক্স, অপেরা, ইন্টারনেট এক্সপ্লোরার 10+ এর জন্য ড্রপ-ডাউন তীর
এই ব্রাউজারের জন্য, একই তীর থাকতে ড্রপ-ডাউনের জন্য একই পটভূমি চিত্রটি সেট করা সহজ ।
এটি করতে, আপনাকে selectট্যাগের জন্য ব্রাউজারের ডিফল্ট স্টাইলটি পুনরায় সেট করতে হবে এবং নতুন ব্যাকগ্রাউন্ড বিধি (আগে প্রস্তাবিত মত) সেট করতে হবে।
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;
...
}
appearanceনিয়ম ব্রাউজার ডিফল্ট বেশী রিসেট করতে কেউ সেট করা হয়, যদি আপনি একে তীর জন্য একই দৃষ্টিভঙ্গি করতে চান, আপনি তাদের স্থানে রাখুন উচিত নয়।
backgroundউদাহরণ নিয়ম করা SVG ইনলাইন চিত্রগুলি যে বিভিন্ন তীর প্রতিনিধিত্বকারী সঙ্গে সেট করা হয়। ডান সীমানায় কিছু মার্জিন রাখার জন্য এগুলি বাম থেকে 98% অবস্থিত (আপনি নিজের ইচ্ছানুসারে অবস্থানটি সহজেই সংশোধন করতে পারবেন)।
সঠিক ক্রস-ব্রাউজার আচরণ বজায় রাখার জন্য, কেবলমাত্র অন্যান্য নিয়মটি রেখে যেতে হবে outline। এই নিয়মটি ডিফল্ট সীমানা পুনরায় সেট করে যা প্রদর্শিত হয় (কিছু ব্রাউজারে) যখন উপাদানটি ক্লিক করা হয়। প্রয়োজনে অন্যান্য সমস্ত বিধিগুলি সহজেই সংশোধন করা যায়।
আইকন ফন্ট ব্যবহার করে ইন্টারনেট এক্সপ্লোরার 8 (আইই 8) এবং ইন্টারনেট এক্সপ্লোরার 9 (আই 9) এর জন্য ড্রপ-ডাউন তীর
এটি আরও শক্ত অংশ ... বা নাও হতে পারে।
এই ব্রাউজারগুলির জন্য ডিফল্ট তীরগুলি লুকানোর জন্য কোনও স্ট্যান্ডার্ড নিয়ম নেই ( select::-ms-expandIE10 + এর মতো)। সমাধানটি হ'ল ড্রপ-ডাউনের যে অংশটি ডিফল্ট তীর রয়েছে সেগুলি লুকিয়ে রাখুন এবং অন্য ব্রাউজারগুলিতে ব্যবহৃত এসভিজির অনুরূপ একটি তীর আইকন ফন্ট (বা আপনি চাইলে একটি এসভিজি) সন্নিবেশ করান (আরও জন্য selectসিএসএস নিয়ম দেখুন ব্যবহৃত ইনলাইন এসভিজি সম্পর্কে বিশদ)।
প্রথম পদক্ষেপটি এমন কোনও ক্লাস সেট করা যা ব্রাউজারকে সনাক্ত করতে পারে: এই কারণেই আমি কোডের শুরুতে শর্তসাপেক্ষে আইআইএফ ব্যবহার করেছি। এই আইএফগুলি htmlপুরানো আই ব্রাউজারটি সনাক্ত করতে ট্যাগের সাথে নির্দিষ্ট ক্লাস সংযুক্ত করতে ব্যবহৃত হয় ।
এর পরে, selectএইচটিএমএলটিতে প্রত্যেককে একটি দ্বারা আবৃত করতে হবে div(বা যে কোনও ট্যাগ যা কোনও উপাদানকে মোড়া করতে পারে )। এই মোড়কে কেবল ক্লাস যুক্ত করুন যাতে আইকন ফন্ট রয়েছে।
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
সহজ কথায়, এই মোড়ক selectট্যাগটি অনুকরণ করতে ব্যবহৃত হয় ।
ড্রপ-ডাউনের মতো কাজ করতে, মোড়কের অবশ্যই একটি সীমানা থাকতে হবে, কারণ আমরা যেটি আসে তার থেকে এটি লুকিয়ে রাখি select।
লক্ষ্য করুন যে আমরা selectসীমানাটি ব্যবহার করতে পারি না কারণ আমরা রেফারটির চেয়ে 25% বেশি লম্বা করে ডিফল্ট তীরটি লুকিয়ে রাখতে পারি। ফলস্বরূপ এর ডান সীমানা দৃশ্যমান হওয়া উচিত নয় কারণ আমরা নিজে overflow: hiddenথেকে প্রয়োগের বিধি দ্বারা এই 25% আরও লুকিয়ে রাখি select।
কাস্টম তীর আইকন-ফন্টটি সিউডো ক্লাসে স্থাপন করা হয়েছে :beforeযেখানে নিয়মে contentতীরের জন্য রেফারেন্স রয়েছে (এই ক্ষেত্রে এটি একটি ডান বন্ধনী)।
যথাসম্ভব এটিকে কেন্দ্র করার জন্য আমরা এই তীরটিও একটি নিখুঁত অবস্থানে রাখি (আপনি যদি বিভিন্ন আইকন ফন্ট ব্যবহার করেন তবে উপরের এবং বাম মান এবং ফন্টের আকার পরিবর্তন করে যথাযথভাবে তাদের সামঞ্জস্য করতে মনে রাখবেন)।
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
আপনি সহজেই background-imageনিয়মে এটি পরিবর্তন করতে বা নিজের দ্বারা একটি নতুন আইকন ফন্ট ফাইল তৈরি করতে চান এমন প্রত্যেকের সাথে আপনি সহজেই ব্যাকগ্রাউন্ড তীর বা আইকন ফন্টের তীরটি তৈরি এবং প্রতিস্থাপন করতে পারেন ।