খাঁটি অর্থপূর্ণ HTML / CSS সমাধান
এটি নিজেরাই প্রয়োগ করা সহজ, কোনও প্রাক-তৈরি সমাধানের প্রয়োজন নেই। সিএসএসের সাথে আপনাকে খুব সহজ মনে হয় না বলে এটি আপনাকে অনেক কিছু শেখাবে।
এটি আপনার করা দরকার:
আপনার চেকবক্সে আলাদা আলাদা idবৈশিষ্ট্য থাকা দরকার। এটি আপনাকে <label>লেবেলের for-ট্রিবিউট ব্যবহার করে এটিতে একটি সংযোগ করতে দেয় ।
উদাহরণ:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
চেকবক্সে লেবেলটি সংযুক্ত করা একটি ব্রাউজারের আচরণকে ট্রিগার করবে: যখনই কেউ লেবেলে ক্লিক করেন (বা এর ভিতরে থাকা চিত্র), চেকবক্সটি টগল হবে।
এর পরে, আপনি display: none;এটির উদাহরণস্বরূপ আবেদন করে চেকবক্সটি আড়াল করেন ।
এখন যা করা বাকি তা হ'ল আপনার label::beforeসিউডো উপাদানটির জন্য আপনি যে স্টাইলটি চান সেটি সেট করা (যা ভিজ্যুয়াল চেকবক্স প্রতিস্থাপনের উপাদান হিসাবে ব্যবহৃত হবে):
label::before {
background-image: url(../path/to/unchecked.png);
}
একটি চূড়ান্ত পদক্ষেপে, আপনি :checkedচেকবক্সটি চেক করা হলে চিত্রটি পরিবর্তন করতে CSS এর সিউডো সিলেক্টরটি ব্যবহার করেন :
:checked + label::before {
background-image: url(../path/to/checked.png);
}
+( সংলগ্ন সহোদর নির্বাচক ) নিশ্চিত করুন যে আপনি শুধুমাত্র লেবেল পরিবর্তন যা সরাসরি মার্কআপ লুকানো চেকবক্সটি অনুসরণ করে তোলে।
উভয় চিত্রকে একটি স্প্রিটম্যাপে রেখে এবং কেবল চিত্রটি অদলবদলের background-positionপরিবর্তে পরিবর্তন প্রয়োগ করে আপনি এটি অপ্টিমাইজ করতে পারেন ।
অবশ্যই আপনাকে সঠিকভাবে লেবেলটি অবস্থান করতে হবে এবং প্রয়োগ করতে হবে display: block;এবং সঠিক widthএবং সেট করতে হবে height।
সম্পাদনা:
কোডেকেন উদাহরণ এবং স্নিপেট, যা আমি এই নির্দেশাবলীর পরে তৈরি করেছি, একই কৌশলটি ব্যবহার করি, তবে চেকবাক্সগুলির জন্য চিত্রগুলি ব্যবহার না করে, চেকবক্স প্রতিস্থাপনগুলি সিএসএসের সাথে খাঁটিভাবে সম্পন্ন হয়::before , একবার লেবেলে একটি তৈরি করে যা একবার যাচাই করা হয়েছিল,content: "✓"; । কিছু বৃত্তাকার সীমানা এবং মিষ্টি রূপান্তর যুক্ত করুন এবং ফলাফলটি সত্যিই পছন্দনীয়!
এখানে এমন একটি কার্যকারী কোডেপেন রয়েছে যা কৌশলটি প্রদর্শন করে এবং চেকবাক্সের জন্য চিত্রগুলির প্রয়োজন হয় না:
http://codepen.io/anon/pen/wadwpx
এখানে একটি স্নিপেটে একই কোড:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
