স্টাইলিং ফর্ম নিয়ন্ত্রণ

এই মডিউলে আপনি শিখবেন কিভাবে স্টাইল ফর্ম কন্ট্রোল করতে হয় এবং কিভাবে আপনার অন্যান্য সাইটের শৈলীর সাথে মেলে।

সতর্কতা: এইচটিএমএল ফর্ম কন্ট্রোল স্টাইল করা একটি চ্যালেঞ্জ হতে পারে, তবে আপনার যেখানেই সম্ভব বিল্ট-ইন উপাদান ব্যবহার করা উচিত। <input> এবং <button> -এর মতো উপাদানগুলি ব্রাউজার এবং প্ল্যাটফর্ম জুড়ে ব্যাপকভাবে সমর্থিত, এবং এতে অন্তর্নির্মিত বৈশিষ্ট্য রয়েছে যা ব্যবহারযোগ্যতা এবং অ্যাক্সেসযোগ্যতা বাড়ায়, যা আপনার নিজের বাস্তবায়নের প্রয়োজন নেই। পরিবর্তে একটি <div> ব্যবহার করা এই সুবিধাগুলি প্রদান করে না।

ব্যবহারকারীদের একটি বিকল্প নির্বাচন করতে সাহায্য করুন

<select> উপাদান

একটি <select> উপাদানের ডিফল্ট শৈলীগুলি দুর্দান্ত দেখায় না, এবং চেহারাটি ব্রাউজারগুলির মধ্যে অসামঞ্জস্যপূর্ণ।

দ্রষ্টব্য: আপনি <datalist> উপাদানের সাথে একত্রে একটি <input> ব্যবহার করতে পারেন। এটি আপনাকে একটি পাঠ্য ক্ষেত্র এবং <option> উপাদানগুলির একটি তালিকার সংমিশ্রণ দেয়। আপনি এখানে <datalist> এর উদাহরণ দেখতে পারেন।

প্রথমে তীর পরিবর্তন করা যাক।

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

একটি <select> উপাদানের ডিফল্ট তীরগুলি সরাতে, CSS appearance বৈশিষ্ট্য ব্যবহার করুন। আপনার পছন্দের তীরটি দেখাতে, তীরটিকে একটি background হিসাবে সংজ্ঞায়িত করুন।

দ্রষ্টব্য: সর্বোত্তম ক্রস-ব্রাউজার সামঞ্জস্য নিশ্চিত করতে, আপনাকে অবশ্যই appearance উপসর্গযুক্ত সংস্করণগুলি অন্তর্ভুক্ত করতে হবে: -moz-appearance এবং -webkit-appearance । বিক্রেতা উপসর্গ সম্পর্কে আরও জানুন ।

আপনার <select> এলিমেন্টের জন্য আপনার font-size কমপক্ষে 1rem (যা বেশিরভাগ ব্রাউজারের জন্য ডিফল্ট মান 16px) এ পরিবর্তন করা উচিত। ফর্ম কন্ট্রোল ফোকাস করার সময় এটি করা iOS Safari-এ একটি পৃষ্ঠা জুম প্রতিরোধ করবে।

আপনি অবশ্যই, আপনার ব্র্যান্ডের রঙের সাথে মেলে উপাদানের রং পরিবর্তন করতে পারেন। ব্যবধান, :hover , এবং :focus এর জন্য আরও কিছু শৈলী যোগ করার পরে, <select> উপাদানটির উপস্থিতি এখন ব্রাউজারগুলির মধ্যে সামঞ্জস্যপূর্ণ।

স্টাইলিং এ সিলেক্ট লাইক ইটস 2019 থেকে নিম্নলিখিত ডেমোতে এটি দেখুন

<option> উপাদান সম্পর্কে কি? <option> উপাদানটি একটি তথাকথিত প্রতিস্থাপিত উপাদান যার উপস্থাপনা CSS এর সুযোগের বাইরে। এই লেখার মতো, আপনি <option> উপাদানটিকে স্টাইল করতে পারবেন না।

দ্রষ্টব্য: ওয়েব ডেভেলপারদের <select> এবং <option> উপাদান সহ অন্তর্নির্মিত ওয়েব UI নিয়ন্ত্রণগুলিকে স্টাইল এবং প্রসারিত করার অনুমতি দেওয়ার জন্য একটি চলমান প্রস্তাব রয়েছে। এটি ভবিষ্যতে স্টাইল ফর্ম কন্ট্রোল করা সহজ করে তুলবে। Open UI সম্পর্কে আরও জানুন।

চেকবক্স এবং রেডিও বোতাম

<input type="checkbox"> এবং <input type="radio"> এর চেহারা ব্রাউজার জুড়ে পরিবর্তিত হয়।

পার্থক্য দেখতে বিভিন্ন ব্রাউজারে ডেমো খুলুন। আসুন দেখি কিভাবে নিশ্চিত করা যায় যে চেকবক্স এবং রেডিও বোতাম আপনার ব্র্যান্ডের সাথে মেলে এবং একই ক্রস-ব্রাউজার দেখতে।

অতীতে, বিকাশকারীরা সরাসরি <input type="checkbox"> এবং <input type="radio"> কন্ট্রোল স্টাইল করতে পারত না। চেকবক্স এবং রেডিও বোতামগুলি এখন তাদের ছদ্ম উপাদানগুলির মাধ্যমে স্টাইল করা যেতে পারে । অথবা এই উপাদানগুলির জন্য কাস্টম শৈলী তৈরি করতে নিম্নলিখিত প্রতিস্থাপন কৌশল ব্যবহার করা যেতে পারে।

প্রথমে, ডিফল্ট চেকবক্স এবং রেডিও বোতামটি দৃশ্যত লুকান।

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

position: absolute opacity: 0 display: none বা visibility: hidden যাতে নিয়ন্ত্রণগুলি কেবল দৃশ্যমানভাবে লুকানো থাকে। এটি নিশ্চিত করবে যে তারা এখনও ব্রাউজারের অ্যাক্সেসিবিলিটি ট্রি দ্বারা উন্মুক্ত। মনে রাখবেন যে দৃশ্যত লুকানো ফর্ম নিয়ন্ত্রণগুলি তাদের প্রতিস্থাপন উপাদানগুলির "উপরে" অবস্থান করে তা নিশ্চিত করার জন্য আরও স্টাইলিং প্রয়োজন হতে পারে। এটি করা নিশ্চিত করতে সাহায্য করবে যে এই উপাদানগুলির মধ্যে একটির উপর ঘোরানো, যখন একটি স্ক্রিন রিডার চালু থাকে, বা যখন স্ক্রিন রিডার সক্ষম করে টাচ ডিভাইসগুলি ব্যবহার করে, স্পর্শ দ্বারা অন্বেষণ করলে দৃশ্যত লুকানো নিয়ন্ত্রণগুলি আবিষ্কারযোগ্য হবে এবং স্ক্রিন রিডারের দৃশ্যমান ফোকাস নির্দেশক হবে সাধারণত স্ক্রিনে নিয়ন্ত্রণগুলি যে স্থানে রেন্ডার করা হয় সেখানে উপস্থিত হয়।

আপনার কাস্টম চেকবক্স এবং রেডিও বোতামগুলি দেখাতে, আপনার কাছে বিভিন্ন বিকল্প রয়েছে৷ আপনি ::before CSS ছদ্ম-উপাদান এবং CSS background প্রপার্টি ব্যবহার করুন বা ইনলাইন SVG ছবি ব্যবহার করুন।

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

দ্রষ্টব্য: শৈলীযুক্ত ফর্ম নিয়ন্ত্রণগুলি বুঝতে এবং ব্যবহার করা সহজ হতে হবে। লোকেরা একটি চেকবক্সে অভ্যস্ত হয় যা একটি চেকবক্সের মতো দেখায়, তাই নিশ্চিত করুন যে আপনি যখন একটি ফর্ম নিয়ন্ত্রণ স্টাইল করেন তখন ব্যবহারকারীরা এখনও এটি কীভাবে ব্যবহার করতে হয় তা বোঝেন।

চেকবক্স এবং রেডিও বোতামগুলি আপনার ব্র্যান্ডের শৈলীর সাথে মেলে তা নিশ্চিত করার জন্য CSS-এর সাথে অনেকগুলি সম্ভাবনা রয়েছে৷

<input type="checkbox"> , এবং <input type="radio"> এবং কাস্টম চেকবক্স স্টাইল সম্পর্কে আরও জানুন।

ফর্ম নিয়ন্ত্রণের জন্য আপনার সাইটের রঙগুলি কীভাবে ব্যবহার করবেন

আপনি কি কোডের এক লাইন দিয়ে আপনার সাইটের শৈলীগুলিকে নিয়ন্ত্রণ করতে চান? আপনি এটি অর্জন করতে accent-color সিএসএস বৈশিষ্ট্য ব্যবহার করতে পারেন।

checkbox {
  accent-color: orange;
}

দ্রষ্টব্য: এই লেখা পর্যন্ত, শুধুমাত্র Chrome, Firefox এবং Edge সমর্থন করে accent-color । ক্রস-ব্রাউজার সামঞ্জস্য নিশ্চিত করতে, সমস্ত প্ল্যাটফর্মে accent-color সমর্থিত না হওয়া পর্যন্ত আপনি সমাধান ব্যবহার করতে চাইতে পারেন।

আপনার উপলব্ধি পরীক্ষা করুন

স্টাইলিং ফর্ম নিয়ন্ত্রণ আপনার জ্ঞান পরীক্ষা

ফর্ম কন্ট্রোলের প্ল্যাটফর্ম-নেটিভ স্টাইলিং কীভাবে আপনি সরাতে পারেন?

revert: all; .

আবার চেষ্টা করুন!

appearance: none; .

🎉

appearance: revert; .

আবার চেষ্টা করুন!

revert: appearance; .

আবার চেষ্টা করুন!

সম্পদ

• অ্যাকসেন্ট রঙ
• <select> উপাদানটি স্টাইল করা
• শৈলীযুক্ত ফর্ম নিয়ন্ত্রণের অ্যাক্সেসযোগ্যতা
• UI খুলুন