অনেকেই CheckBox ডিজাইন করতে গেলে সমস্যাই পরেন। আজকে আমি দেখাবো কিভাবে সিএসএস ব্যবহার করে অতি সহজে চেকবক্স ডিজাইন কর যায় ।
প্রথমে আমারা চেকবক্স এর এইচটিএমএল মার্কআপ করবো, আমি কিছু এক্সামপ্ল কোড দিয়ে বঝানোর চেষ্টা করবো।
#HTML_MARKUP
<form>
<input type=”checkbox” id=”html” name=”html” value=”HTML”>
<label for=”html”>HTML</label>
<input type=”checkbox” id=”css” name=”css” value=”CSS”>
<label for=”css”>CSS</label>
<input type=”checkbox” id=”jquery” name=”jquery” value=”jquery”>
<label for=”jquery”>JQuery</label>
<input type=”checkbox” id=”javascript” name=”javascript” value=”javascript”>
<label for=”javascript”>Javascript</label>
</form>
#CSS_Style
১. প্রথম সিলেকটর এর সিএসএস বুঝানোর কিছু নেই 🙂
input[type=checkbox] + label {
display: block;
margin: 5px;
cursor: pointer;
padding: 5px;
}
২. এখানে ডিস্প্লে নান করা হয়েছে ডীফল্ট চেকবক্স কে হাইড করার জন্য।
input[type=checkbox] {
display: none;
}
৩. এখানে কন্টেন্ট এর অধীনে একটা টিকমার্ক এর কোড দেয়া হয়েছে যেন টিকমার্ক টা লেবেল এর আগে শো করে। আপনি ইচ্ছা করলে ফন্টওসাম আইকন অথবা ইমেজ ও ব্যবহার করতে পারেন।
input[type=checkbox] + label:before {
content: “\2714”;
border: 2px solid #34495E;
border-radius: 5px;
display: inline-block;
width: 16px;
height: 16px;
padding-left: 4px;
padding-bottom: 6px;
margin-right: 5px;
vertical-align: bottom;
color: transparent;
transition: .2s;
}
৪. এখানে সিএসএস-৩ এনিমেশন ব্যবহার করা হয়েছে যেন চেক করার পর একটা সুন্দর এনিমেশন হয়।
input[type=checkbox] + label:active:before {
transform: scale(0);
}
৫. চেকবক্স টি চেকড হয়ার পর বাকগ্রউন্ড কালার, চেকমার্ক এবং বরডার কালার কি হবে সেই স্টাইল এখানে দেয়া হয়েছে।
input[type=checkbox]:checked + label:before {
background-color: #2AAF74;
border-color: #2AAF74;
color: #fff;
}
#Output
আজকে এই পর্যন্তই , সাথে থাকার জন্য সবাইকে ধন্যবাদ।
সূত্রঃ আর আর ফাউন্ডেশন