কিভাবে সিএসএস দিয়ে চেকবক্স (CheckBox) ডিজাইন করবেন

কিভাবে সিএসএস দিয়ে চেকবক্স (CheckBox) ডিজাইন করবেন

অনেকেই 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

আজকে এই পর্যন্তই , সাথে থাকার জন্য সবাইকে ধন্যবাদ।

সূত্রঃ আর আর ফাউন্ডেশন