এইচটিএমএল রেডিও বোতামগুলি ওয়েব ফর্মগুলির একটি প্রধান, তবে তাদের ডিফল্ট উপস্থিতি পছন্দসই হতে অনেক কিছু ছেড়ে দেয়। এই ব্লগ পোস্টে, আমরা CSS ব্যবহার করে রেডিও বোতামের চেহারা কাস্টমাইজ করার জন্য আমার প্রিয় পদ্ধতিগুলির মধ্যে একটির মাধ্যমে হাঁটব, আরও ব্যবহারকারী-বান্ধব এবং দৃশ্যত আকর্ষণীয় অভিজ্ঞতা তৈরি করব৷   https://youtu.be/PlldXyuTnUw?embedable=true  এর রেডিও বোতাম লুকিয়ে শুরু করা যাক!  রেডিও বোতামের জন্য ক্রস-ব্রাউজার স্টাইলিং এর সীমাবদ্ধতা স্বীকার করে আমাদের শুরু করতে হবে। যদিও এটি হতাশাজনক যে আমরা তাদের সরাসরি স্টাইল করতে পারি না, আমরা সমাধান ব্যবহার করতে পারি। এই উদাহরণে, প্রথম ধাপ হল প্রকৃত রেডিও বোতাম ইনপুট লুকানো। আমি জানি এটি অদ্ভুত শোনাচ্ছে, কিন্তু আমরা জানি যে আমরা সেগুলিকে স্টাইল করতে পারি না, তাই আমাদের কেবল সেগুলিকে সমীকরণের বাইরে নিয়ে যেতে হবে।  যাইহোক, এটি একটি অ্যাক্সেসযোগ্য পদ্ধতিতে করা উচিত, এটি নিশ্চিত করে যে এটি সমস্ত ব্যবহারকারীর জন্য কার্যকরী থাকে৷ এটি নিম্নলিখিত শৈলীগুলির সেট ব্যবহার করে অর্জন করা যেতে পারে যা দৃশ্যত বিষয়বস্তুটিকে তার ব্যবহারযোগ্যতা বজায় রেখে লুকিয়ে রাখে:   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 সহ আমাদের লেবেলে   pseudo-element ব্যবহার করব। ::before  আমাদের উদাহরণের জন্য, এইচটিএমএল দেখতে এইরকম:   <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; }  এটি নিশ্চিত করবে যে একবার আমরা আমাদের রেডিও বোতাম শৈলী যোগ করলে, এটি লেবেল পাঠ্যের সাথে সঠিকভাবে উল্লম্বভাবে সারিবদ্ধ হবে।  এখন, আমরা   pseudo-element ব্যবহার করে আমাদের মক রেডিও বোতাম যোগ করব: ::before   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; }  আসুন ফোকাস সম্পর্কে ভুলে যাই না  অ্যাক্সেসিবিলিটি উন্নত করতে, আমাদের মক রেডিও বোতামগুলির ফোকাসড অবস্থার দিকেও নজর দিতে হবে। এবার আমাদের   pseudo-class এবং পার্শ্ববর্তী ভাইবোন নির্বাচককে লেবেল সহ ব্যবহার করতে হবে: :focus   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 রেডিও বোতামের চেহারা পরিবর্তন করতে পারেন!   https://codepen.io/brianmtreese/pen/bGOGeBJ?embedable=true

Buy Me a Coffee

গল্পের মূল ভাষায় এই অডিও তৈরি!

অতিদীর্ঘ; পড়তে

Make resilience your competitive advantage

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

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

আয় করতে ট্যাপ করুন: টেলিগ্রাম সোলানার আগে পরবর্তী 10 বিলিয়ন ক্রিপ্টো ব্যবহারকারীদের অনবোর্ড করতে পারে

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

এআই/এমএল ডাটালেকের জন্য রেফারেন্স আর্কিটেকচার তৈরির জন্য একজন স্থপতির গাইড

আয় করতে ট্যাপ করুন: টেলিগ্রাম সোলানার আগে পরবর্তী 10 বিলিয়ন ক্রিপ্টো ব্যবহারকারীদের অনবোর্ড করতে পারে

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps