পিউর সিএসএস দিয়ে চেকবক্স এবং রেডিও বাটন কাস্টোমাইজ করার গাইড

কখনও কখনও ফর্ম তৈরি করার সময়, আমাদের চেকবক্স এবং রেডিও বাটন ইনপুট ব্যবহার করতে হয় ইউজার প্রেফারেন্স (user preferences), টার্মস এক্সেপ্ট (agreeing to terms), বা ডেমোগ্রাফিক ডেটা সংগ্রহের জন্য। HTML ইনপুট এলিমেন্ট যেমন চেকবক্স বা রেডিও বাটনগুলোর একটি ডিফল্ট আপিয়ারেন্স (default appearance) থাকে। আপনি যদি আপিয়ারেন্সে যেকোনো পরিবর্তন আনা চান, তবে আপনি সিএসএস ব্যবহার করে আপনার পছন্দমত লুক কাস্টোমাইজ করতে পারেন। এই আর্টিকেল আপনাকে দেখাবে কিভাবে আপনার ফর্ম বা ওয়েব পেজের জন্য একটি চেকবক্স এবং একটি রেডিও ইনপুট কাস্টোমাইজ করতে হয়।

HTML সেটআপ

চেকবক্স এবং রেডিও বাটন দুটোর জন্যই আমরা যে HTML স্কেলেটন কোড স্টাইল করব সেটা মূলত একই।

একটি চেকবক্স/রেডিও বাটনের জন্য আমাদের মেইন কন্টেইনার হবে HTML label এলিমেন্ট। তার ভিতরে, আমাদের থাকবে একটি ইনপুট এলিমেন্ট এর উপযুক্ত টাইপসহ এবং একটি স্প্যান (span) এলিমেন্ট যা দেখাবে এলিমেন্টটি সিলেক্টেড হয়েছে কিনা।

<html> <head> <style> /* No CSS Here Yet. */ </style>> </head> <body> <h2>Radio Button and Checkbox CSS Example</h2> <label class="input">One <input type="radio" name="radio-example" checked="checked"> <span class="checkmark fill"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark fill"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark fill"></span> </label> <script href="script.js"></script> </body> </html>

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

দ্বিতীয় সেট হচ্ছে চেকবক্স। চেকবক্স ব্যবহার হয় যখন ইউজার একাধিক চয়েস সিলেক্ট করতে পারে যদি চান একটি সিলেকশন থেকে। এছাড়া এটা ব্যবহার হয় সেই পয়েন্টে যেখানে ইউজারকে শুধু এক্সেপ্ট/ডিসএগ্রি (agree/disagree) বা হ্যাঁ/না (yes/no) বলতে হয়।

এই HTML এলিমেন্টগুলোর ডিফল্ট আপিয়ারেন্স রয়েছে। আপনি যদি চান সেগুলো কাস্টোমাইজ করতে, তবে আপনি নিশ্চয়ই সেটা করতে পারেন! আপনি সিএসএস ব্যবহার করে স্টাইল অ্যাডজাস্ট করতে পারেন:

সিএসএস সেটআপ

আপনার রেডিও বাটন বা চেকবক্সের স্টাইলিং পরিবর্তন করার জন্য, আপনাকে সমস্যাটাকে নিচের স্টেপগুলোর মাধ্যমে ব্রেক ডাউন (break down) করতে হবে:

1. লেবেল (label) কাস্টোমাইজ করুন
   1. Display প্রপার্টি
   2. Position relative
   3. Cursor pointer
   4. Margin এবং padding যাতে এস্থেটিকালি প্লিজিং (aesthetically pleasing) দেখে
2. ডিফল্ট চেকবক্স হাইড (hide) করুন
   1. Display প্রপার্টি
3. একটি কন্টেইনার তৈরি করুন যা কাস্টোম চেকবক্স হিসেবে কাজ করবে
   1. Height
   2. Width
   3. Background
   4. Position – absolute
   5. Top, left ভ্যালু সেট করুন
4. হভার (hover) করার সময় কিছু স্পেশাল হ্যাপেন করান (যেমন চেকবক্সের ব্যাকগ্রাউন্ড রঙ পরিবর্তন)
5. বক্স বা বাটন চেকড (checked) হলে ব্যাকগ্রাউন্ড রঙ পরিবর্তন করুন
6. চেক নহলে চেকমার্ক বা সার্কেল হাইড করুন
7. চেক হলে চেকমার্ক বা সার্কেল শো (show) করুন
8. চেকমার্ক স্টাইল করুন
9. সার্কেল স্টাইল করুন

নিচের কোড देखने আগে, আমি রিকমেন্ড করছি স্কেলেটন HTML এবং উপরের সমাধানের স্টেপ ব্রেকডাউন দিয়ে নিজে চেষ্টা করে বুঝতে।

সমাধানের কোড (Solution Code):

<html> <head> <style> /* Customize the label (the input) */ label { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox */ label input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox container */ .checkmark, .link { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } /* Add border radius for the radio button */ .circle { border-radius: 50%; } /* On mouse-over, add a background color */ label:hover input ~ .checkmark { background-color: #ccc; } /* When the checkbox is checked, add a blue background */ label input:checked ~ .checkmark { background-color: #2196F3; } /* Create the checkmark/circle (hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the checkmark when checked */ label input:checked ~ .checkmark:after { display: block; } /* Style the checkmark */ label .checkmark:after { left: 10px; top: 3px; width: 5px; height: 15px; border: solid white; border-width: 0 3px 3px 0; /* always check to see if you need to use the css browser prefixes */ -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } /* Style the radio button circle */ label .circle:after { width: 15px; height: 15px; /* since .circle and .checkmark are technically the same element, we have to set border none otherwise an unwanted checkmark will show up on screen */ border: none; background: white; border-radius: 50%; left: 20%; top: 20%; } </style> </head> <body> <h2>CSS Radio Button and Checkbox Example</h2> <label class="input">One <input type="radio" name="radio-example" checked> <span class="checkmark circle"></span> </label> <label class="input">Two <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <label class="input">Three <input type="radio" name="radio-example"> <span class="checkmark circle"></span> </label> <h2>Checkbox Example</h2> <label class="input">Four <input type="checkbox" name="radio-example" checked> <span class="checkmark"></span> </label> <label class="input">Five <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> <label class="input">Six <input type="checkbox" name="radio-example"> <span class="checkmark"></span> </label> </body> </html>

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