ব্র্যান্ডেড সিলেক্ট স্টাইলিং

কাস্টমাইজ করা যায় এমন সিলেক্ট API, আপনার ব্র্যান্ডের ডিজাইন সিস্টেমের সাথে নিখুঁতভাবে ম্যাচ করার জন্য <select> এলিমেন্ট স্টাইল করার একটি ডিক্লারেটিভ, CSS-চালিত উপায় অফার করে। appearance: base-select-এ অপ্ট-ইন করার মাধ্যমে, আপনি বেছে নেওয়া এলিমেন্টের ইন্টার্নাল শ্যাডো DOM-এ অ্যাক্সেস পাবেন, যা আপনাকে স্ট্যান্ডার্ড CSS প্রপার্টি ব্যবহার করে বোতাম, বিকল্প বেছে নেওয়ার তালিকা, তীরচিহ্ন আইকন এবং টিকচিহ্ন ইন্ডিকেটর স্টাইল করার অনুমতি দেয়।

আগে, সম্পূর্ণ ব্র্যান্ডেড সিলেক্ট তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করে কন্ট্রোলটি নতুন করে তৈরি করতে হতো, যা প্রায়শই অ্যাক্সেসিবিলিটি, কীবোর্ড নেভিগেশন এবং নেটিভ ফর্ম ইন্টিগ্রেশনকে ব্যাহত করত। appearance: base-select-এর মাধ্যমে, আপনি একটি কাস্টম লুক পাবেন, যেখানে ব্রাউজার ফোকাস ম্যানেজমেন্ট, টপ-লেয়ার রেন্ডারিং এবং অ্যাক্সেসিবিলিটি বাইন্ডিং ম্যানেজ করে।

কীভাবে প্রয়োগ করতে হয়

ব্র্যান্ডেড সিলেক্ট স্টাইলিং প্রয়োগ করতে:

1. কাস্টমাইজেশন চালু করুন: <select> এলিমেন্ট এবং ::picker(select) ছদ্ম-এলিমেন্ট (যা বিকল্পের ড্রপ-ডাউন তালিকাকে টার্গেট করে) দুটিতেই appearance: base-select প্রয়োগ করুন।
2. কাস্টম বোতামের স্ট্রাকচার তৈরি করুন (ঐচ্ছিক): ডিফল্ট ট্রিগার পরিবর্তন করতে, <select>-এর ঠিক ভিতরে একটি <button> এলিমেন্ট নির্ধারণ করুন। বর্তমানে বেছে নেওয়া বিকল্পের টেক্সট বা কন্টেন্ট দেখানোর জন্য এই বোতামের মধ্যে <selectedcontent> এলিমেন্ট ব্যবহার করুন।
3. পিকার লিস্ট স্টাইল করুন: ড্রপডাউন লিস্টে টাইপোগ্রাফি, ব্যাকগ্রাউন্ড কালার, বর্ডার ও শ্যাডো প্রয়োগ করতে ::picker(select) ছদ্ম-এলিমেন্ট ব্যবহার করুন। ব্রাউজার এটি টপ-লেয়ারে রেন্ডার করে, যার ফলে z-index সংক্রান্ত সমস্যা আর হয় না।
4. স্টাইল ইন্টার্নাল আইকন:
   • তীরচিহ্ন আইকন স্টাইল বা পরিবর্তন করতে select::picker-icon ব্যবহার করুন।
   • অ্যাক্টিভ বিকল্পের পাশে টিকচিহ্ন ইন্ডিকেটর স্টাইল করতে option::checkmark ব্যবহার করুন।
5. স্টাইল সংক্রান্ত বিকল্প: হোভার স্টেট, প্যাডিং ও লেআউটের জন্য <option>টি এলিমেন্টে স্টাইল প্রয়োগ করুন।

উদাহরণ কোড: ব্র্যান্ডেড কুরিয়ার বেছে নিন

নিম্নলিখিত উদাহরণে একটি কাস্টম বেছে নেওয়ার স্টাইল দেখানো হয়েছে যেখানে একটি নির্দিষ্ট "পার্সেল" ব্র্যান্ডের নান্দনিকতার সাথে ম্যাচ করার জন্য মোনোস্পেস ফন্ট এবং ড্যাশড বর্ডার ব্যবহার করা হয়েছে।

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

স্ট্র্যাটেজিক প্রয়োগ ও পেশাদার পদ্ধতি

• আপনার ডিজাইন সিস্টেমের জন্য যদি সমস্ত ফর্ম কন্ট্রোল জুড়ে হাই-ফিডেলিটি, ভিজ্যুয়াল সামঞ্জস্যের প্রয়োজন হয়, যা স্ট্যান্ডার্ড ক্রস-ব্রাউজার সিলেক্ট ওভাররাইডের মাধ্যমে অর্জন করা যায় না, তাহলে appearance: base-select ব্যবহার করুন।
• আপনি যদি অপারেটিং সিস্টেমের নেটিভ পিকার অভিজ্ঞতার উপর নির্ভর করেন (যেমন, iOS ডিভাইসে স্ট্যান্ডার্ড স্ক্রল হুইল পিকার), তাহলে এটি ব্যবহার করবেন না। base-select-এ অপ্ট-ইন করলে, ওয়েব-রেন্ডার করা টপ-লেয়ার মেনুর জন্য নেটিভ মোবাইল UI কন্ট্রোল থেকে অপ্ট-আউট করা হয়।
• কালার কনট্রাস্ট WCAG স্ট্যান্ডার্ড মেনে চলছে কিনা তা যাচাই করুন। কাস্টমাইজ করা যায় এমন পিকার আপনাকে অ্যাড-হক রঙ সেট করার অনুমতি দেয়, তবে কাস্টম ব্যাকগ্রাউন্ডের বিপরীতে টেক্সট যাতে পাঠযোগ্য থাকে তা নিশ্চিত করার দায়িত্ব আপনার।
• লেআউট আচরণ পরীক্ষা করুন। appearance: base-select সেট করলে, ডিফল্ট ব্রাউজার আচরণ সরিয়ে দেয়, যা সবচেয়ে দীর্ঘ বিকল্পের প্রস্থের উপর ভিত্তি করে বেছে নেওয়ার সাইজ নির্ধারণ করে। লেআউট শিফ্ট প্রতিরোধ করতে আপনাকে নির্দিষ্ট প্রস্থ সেট করতে বা ফ্লেক্স/গ্রিড কনস্ট্রেন্ট ব্যবহার করতে হতে পারে।
• আপনার <select>-এ name অ্যাট্রিবিউট এবং সংশ্লিষ্ট <label> আছে কিনা তা নিশ্চিত করুন। এটি নিশ্চিত করে যে কাস্টম UI থাকলেও, কম্পোনেন্টটি স্ক্রিন রিডারের জন্য অ্যাক্সেসযোগ্য থাকে এবং স্ট্যান্ডার্ড ফর্ম জমা দেওয়ার সাথে সঠিকভাবে কাজ করে।
• ফর্ম জমা দেওয়ার প্রক্রিয়া যাতে আগের মতোই কাজ করে তা নিশ্চিত করতে বিকল্পে স্ট্যান্ডার্ড value অ্যাট্রিবিউট ব্যবহার করুন।

ফলব্যাক স্ট্র্যাটেজি

কাস্টমাইজ করা যায় এমন <select>-এর জন্য ফলব্যাক ও ব্রাউজার সাপোর্ট

যেসব ব্রাউজারে এখনও appearance: base-select কাজ করে না, সেখানে <select> এলিমেন্ট স্ট্যান্ডার্ড অপারেটিং সিস্টেম ড্রপডাউনে অবনমিত হয়।

• টেক্সট নয় এমন কন্টেন্ট উপেক্ষা করা হয়েছে: পুরনো ব্রাউজার <option> ট্যাগের মধ্যে HTML ট্যাগ (যেমন <svg> বা <div>) বাদ দিয়ে শুধু টেক্সট নোড দেখায়। <option>-এর টেক্সট কন্টেন্ট যেন পাঠযোগ্য এবং অর্থপূর্ণ হয় তা নিশ্চিত করুন।
• HTML স্ট্রাকচার ম্যানেজ করা: স্ট্যান্ডার্ড পার্সার <select>-এর মধ্যে <button> এবং <selectedcontent> ট্যাগ উপেক্ষা করতে পারে বা সেগুলিকে ভুল হিসেবে বিবেচনা করতে পারে। আপনি যদি স্ট্যান্ডার্ড টেক্সটকে রিডেবল ফলব্যাক হিসেবে দেখেন, তাহলে প্রোগ্রেসিভ এনহ্যান্সমেন্টের জন্য কোনও ভারী জাভাস্ক্রিপ্ট পলিফিলের প্রয়োজন নেই।

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});