কখনও কখনও আমরা যখন ফর্মগুলি তৈরি করি, তখন ব্যবহারকারীর পছন্দগুলি সংগ্রহ করতে, শর্তাবলীতে সম্মতি বা জনসংখ্যার তথ্য সংগ্রহ করতে আমাদের চেকবক্স এবং রেডিও বোতাম ইনপুট ব্যবহার করতে হবে৷ চেকবক্স বা রেডিও বোতামের মতো এইচটিএমএল ইনপুট উপাদানগুলির একটি ডিফল্ট চেহারা থাকে। আপনি যদি চেহারাটি একেবারেই পরিবর্তন করতে চান তবে আপনি আপনার পছন্দ অনুসারে একটি চেহারা কাস্টমাইজ করতে CSS ব্যবহার করতে পারেন। এই নিবন্ধটি আপনাকে আপনার ফর্ম বা ওয়েব পৃষ্ঠার জন্য একটি চেকবক্স এবং একটি রেডিও ইনপুট কীভাবে কাস্টমাইজ করতে হয় তার একটি নমুনা দেখাবে৷
HTML সেটআপ
আমরা যে এইচটিএমএল কঙ্কাল কোডটি স্টাইল করব তা মূলত চেকবক্স এবং রেডিও বোতাম উভয়ের জন্যই একই।
একটি এর জন্য আমাদের প্রধান ধারক চেকবক্স/রেডিও বোতামটি এইচটিএমএল লেবেল উপাদান হবে। সেই লেবেলের ভিতরে, আমাদের কাছে উপযুক্ত প্রকারের একটি ইনপুট উপাদান থাকবে এবং একটি স্প্যান উপাদান থাকবে যা দেখাবে উপাদানটি নির্বাচন করা হয়েছে কিনা।
<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>
উপরের মার্কআপে ইনপুটগুলির প্রথম সেট হল রেডিও বোতাম। আপনি ফর্মের জন্য রেডিও বোতাম ব্যবহার করবেন যখন একজন ব্যবহারকারীকে শুধু একটি বেছে নিতে হবে একাধিক পছন্দ থেকে নির্বাচন।
দ্বিতীয় সেট হল চেকবক্স। চেকবক্স ব্যবহার করা হয় যখন ব্যবহারকারীরা পছন্দের একটি নির্বাচন থেকে একাধিক পছন্দ নির্বাচন করতে পারেন। এগুলি এমন পয়েন্টগুলিতেও ব্যবহার করা হয় যেখানে একজন ব্যবহারকারীকে কিছুতে সম্মত/অসম্মতি বা হ্যাঁ/না করতে হবে।
এই HTML উপাদানগুলির ডিফল্ট উপস্থিতি রয়েছে৷ আপনি যদি সেগুলি কাস্টমাইজ করতে চান তবে আপনি অবশ্যই তা করতে পারেন! আপনি শৈলী সামঞ্জস্য করতে CSS ব্যবহার করতে পারেন:
সিএসএস সেটআপ
আপনার রেডিও বোতাম বা আপনার চেকবক্সের স্টাইলিং পরিবর্তন করার জন্য, আপনাকে নিম্নলিখিত ধাপে সমস্যাটি ভেঙে ফেলতে হবে:
- লেবেল কাস্টমাইজ করুন
- প্রপার্টি প্রদর্শন করুন
- অবস্থান আপেক্ষিক
- কারসার পয়েন্টার
- এটিকে নান্দনিকভাবে আনন্দদায়ক করতে মার্জিন এবং প্যাডিং
- ডিফল্ট চেকবক্স লুকান
- প্রপার্টি প্রদর্শন করুন
- একটি ধারক তৈরি করুন যা কাস্টম চেকবক্স হবে
- উচ্চতা
- প্রস্থ
- পটভূমি
- অবস্থান – পরম
- শীর্ষ, বাম মান সেট করুন
- বিশেষ কিছু যোগ করুন যা হোভারে ঘটবে (যেমন চেকবক্সের পটভূমির রঙ পরিবর্তন করুন)
- বক্স বা বোতাম চেক করা হলে পটভূমির রঙ পরিবর্তন করুন
- চেকমার্ক না থাকলে চেকমার্ক বা বৃত্ত লুকান
- চেক করা হলে চেকমার্ক বা বৃত্ত দেখান
- চেকমার্ক স্টাইল করুন
- বৃত্তটি স্টাইল করুন
নীচের কোডটি দেখার আগে, আমি কঙ্কাল এইচটিএমএল এবং উপরের সমস্যাটি সমাধানের জন্য ধাপগুলির ভাঙ্গন দিয়ে এটিকে নিজে থেকে বের করার চেষ্টা করার পরামর্শ দেব৷
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
সমাধান কোড:
<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> সেখানে আপনি এটি আছে; CSS-এ রেডিও বোতাম এবং চেকবক্সের উদাহরণ। এটি প্রথমে আপনার মনকে মোড়ানোর জন্য কিছুটা হতে পারে, তবে আপনি এটি পাবেন! আপনি যদি এই CSS অনুশীলনের মধ্য দিয়ে যেতে সক্ষম হন তবে আপনি আরও কঠিন বিষয়গুলিতে এগিয়ে যেতে প্রস্তুত৷
