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

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

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

<select> উপাদান

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

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

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 হিসাবে সংজ্ঞায়িত করুন।

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

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

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

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

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

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

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

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

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

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

position: absolute : display: none opacity: 0 : কিছুই নয় বা 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;
}

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

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

সম্পদ

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