এইচটিএমএল রেডিও বোতামগুলি কীভাবে স্টাইল করবেন: একটি ধাপে ধাপে নির্দেশিকা

এইচটিএমএল রেডিও বোতামগুলি ওয়েব ফর্মগুলির একটি প্রধান, তবে তাদের ডিফল্ট উপস্থিতি পছন্দসই হতে অনেক কিছু ছেড়ে দেয়। এই ব্লগ পোস্টে, আমরা CSS ব্যবহার করে রেডিও বোতামের চেহারা কাস্টমাইজ করার জন্য আমার প্রিয় পদ্ধতিগুলির মধ্যে একটির মাধ্যমে হাঁটব, আরও ব্যবহারকারী-বান্ধব এবং দৃশ্যত আকর্ষণীয় অভিজ্ঞতা তৈরি করব৷

এর রেডিও বোতাম লুকিয়ে শুরু করা যাক!

রেডিও বোতামের জন্য ক্রস-ব্রাউজার স্টাইলিং এর সীমাবদ্ধতা স্বীকার করে আমাদের শুরু করতে হবে। যদিও এটি হতাশাজনক যে আমরা তাদের সরাসরি স্টাইল করতে পারি না, আমরা সমাধান ব্যবহার করতে পারি। এই উদাহরণে, প্রথম ধাপ হল প্রকৃত রেডিও বোতাম ইনপুট লুকানো। আমি জানি এটি অদ্ভুত শোনাচ্ছে, কিন্তু আমরা জানি যে আমরা সেগুলিকে স্টাইল করতে পারি না, তাই আমাদের কেবল সেগুলিকে সমীকরণের বাইরে নিয়ে যেতে হবে।

যাইহোক, এটি একটি অ্যাক্সেসযোগ্য পদ্ধতিতে করা উচিত, এটি নিশ্চিত করে যে এটি সমস্ত ব্যবহারকারীর জন্য কার্যকরী থাকে৷ এটি নিম্নলিখিত শৈলীগুলির সেট ব্যবহার করে অর্জন করা যেতে পারে যা দৃশ্যত বিষয়বস্তুটিকে তার ব্যবহারযোগ্যতা বজায় রেখে লুকিয়ে রাখে:

 input[type="radio"] { border: 0 !important; clip: rect(1px, 1px, 1px, 1px); height: 1px !important; overflow: hidden; padding: 0 !important; position: absolute !important; width: 1px !important; }

কাস্টম রেডিও বোতাম তৈরি করা

রেডিও বোতামের কাস্টম চেহারা তৈরি করতে, আমরা যে চেহারাটি খুঁজছি তা তৈরি করতে কিছু সাধারণ CSS সহ আমাদের লেবেলে ::before pseudo-element ব্যবহার করব।

আমাদের উদাহরণের জন্য, এইচটিএমএল দেখতে এইরকম:

 <form> <h1>Can We Style HTML Radio Buttons?</h1> <ul> <li> <input type="radio" value="yes" name="option" id="yes" /> <label for="yes">Yes</label> </li> <li> <input type="radio" value="no" name="option" id="no" /> <label for="no">No</label> </li> <li> <input type="radio" value="maybe" name="option" id="maybe" /> <label for="maybe">Maybe</label> </li> </ul> </form>

শুরু করতে, আমরা আমাদের লেবেল উপাদানে নিম্নলিখিত শৈলী যোগ করব:

 label { display: inline-flex; align-items: center; }

এটি নিশ্চিত করবে যে একবার আমরা আমাদের রেডিও বোতাম শৈলী যোগ করলে, এটি লেবেল পাঠ্যের সাথে সঠিকভাবে উল্লম্বভাবে সারিবদ্ধ হবে।

এখন, আমরা ::before pseudo-element ব্যবহার করে আমাদের মক রেডিও বোতাম যোগ করব:

 label::before { content: ''; display: block; height: 1.25em; width: 1.25em; border: solid 1px #ccc; border-radius: 50%; margin-right: 0.5em; }

এই মুহুর্তে, আমাদের কাছে এমন কিছু আছে যা একটি রেডিও বোতাম তালিকার অনুরূপ হতে শুরু করেছে, কিন্তু আমরা যদি রেডিওগুলিতে ক্লিক করি, আমরা দেখতে পাব যে কিছুই ঘটছে না। যদিও ছদ্ম-উপাদানটি দৃশ্যত একটি রেডিও বোতামের সাথে সাদৃশ্যপূর্ণ, তবে এতে ইন্টারঅ্যাক্টিভিটির অভাব রয়েছে কারণ আমরা এখনও চেক করা অবস্থাটি পরিচালনা করিনি।

হ্যান্ডলিং মিথস্ক্রিয়া এবং রাষ্ট্র

আমরা আমাদের লেবেলে :checked সিউডো-ক্লাস এবং সংলগ্ন ভাইবোন নির্বাচক দিয়ে চেক করা অবস্থা পরিচালনা করতে পারি:

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

অভ্যন্তরীণ বিন্দুর জন্য, আমরা আমাদের ছদ্ম-উপাদানে একটি রেডিয়াল গ্রেডিয়েন্ট ব্যবহার করতে পারি:

 input[type="radio"]:checked + label::before { background: radial-gradient(0.75em circle at center, currentColor 50%, transparent 55%); box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

সেখানে, এখন যখন আমরা এইগুলিতে ক্লিক করি, তারা অনেকটা নেটিভ রেডিও বোতামের মতো কাজ করে। এবং আমরা কিছু ট্রানজিশন ইফেক্ট যোগ করে মিথস্ক্রিয়াকে উন্নত করতে পারি:

 label::before { ... transition: border ease-in 150ms, box-shadow ease-in 150ms; }

আসুন ফোকাস সম্পর্কে ভুলে যাই না

অ্যাক্সেসিবিলিটি উন্নত করতে, আমাদের মক রেডিও বোতামগুলির ফোকাসড অবস্থার দিকেও নজর দিতে হবে। এবার আমাদের :focus pseudo-class এবং পার্শ্ববর্তী ভাইবোন নির্বাচককে লেবেল সহ ব্যবহার করতে হবে:

 input[type="radio"]:checked + label, input[type="radio"]:focus + label { color: black; } input[type="radio"]:focus + label::before { box-shadow: 0 0 1em 0 rgba(10, 150, 255, 0.75); border-color: currentColor; }

উপসংহার

এই পদ্ধতি অনুসরণ করে, আমরা আড়ম্বরপূর্ণ এবং অ্যাক্সেসযোগ্য কাস্টম রেডিও বোতাম তৈরি করতে পারি যা ব্যবহারকারীর অভিজ্ঞতাকে ব্যাপকভাবে উন্নত করে। এই কাস্টমাইজড রেডিও বোতামগুলি শুধুমাত্র স্ট্যান্ডার্ডগুলির চেয়ে ভাল দেখায় না তবে সঠিকভাবে প্রয়োগ করা হলে আরও ভাল প্রতিক্রিয়া এবং মিথস্ক্রিয়া প্রদান করতে পারে।

এটি একটি চমত্কার সাধারণ উদাহরণ যা স্থানীয় ব্রাউজার শৈলীগুলির চেয়ে সত্যিই খুব বেশি আলাদা নাও দেখাতে পারে তবে মূল বিষয় হল, এই সেটআপের মাধ্যমে, আমরা যা চাই তা করতে পারি। সুতরাং, শৈলীগুলির সাথে পরীক্ষা করতে নির্দ্বিধায় এবং সেগুলিকে আপনার প্রকল্পের নকশার সাথে খাপ খাইয়ে নিন৷

এটি কর্মে দেখতে চান?

নীচের কোড পেন উদাহরণে এই কৌশলটির ডেমো কোড এবং উদাহরণগুলি দেখুন। আপনার যদি কোন প্রশ্ন বা চিন্তা থাকে, একটি মন্তব্য করতে দ্বিধা করবেন না.

মনে রাখবেন যে সামান্য সৃজনশীলতা এবং কিছু CSS দিয়ে, আপনি অ্যাক্সেসযোগ্যতা এবং ব্যবহারযোগ্যতা বজায় রেখে আপনার ডিজাইনের সাথে মেলে HTML রেডিও বোতামের চেহারা পরিবর্তন করতে পারেন!