CSS উপস্থিতি সম্পত্তি সহ কাস্টম চেকবক্স

আমরা ব্যবহারকারীর অপারেটিং সিস্টেমের প্ল্যাটফর্ম-নেটিভ স্টাইল অনুসারে একটি উপাদানকে স্টাইল করতে চেহারা বৈশিষ্ট্য ব্যবহার করি।

সিনট্যাক্স

CSS উপস্থিতি সম্পত্তির সিনট্যাক্স নিম্নরূপ -

Selector {
   appearance: /*value*/;
   -webkit-appearance: /*value*/; /*for Safari and Chrome */
   -moz-appearance: /*value*/; /*for Firefox */
}

এর জন্য

উদাহরণ

নিম্নলিখিত উদাহরণগুলি সিএসএস উপস্থিতি বৈশিষ্ট্যকে চিত্রিত করে৷

৷

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 12px;
         background-color: cyan;
         box-shadow: inset 0 3px 3px 5px lightgreen;
         border-radius:50%;
      }
      input[type=checkbox]:checked {
         background-color: coral;
         border: 6px solid cornflowerblue;
         box-shadow: 0 1px 2px lightorange;
      }
      input[type=checkbox]:checked:after {
         content:"Checked";
      }
   </style>
<body>
   <input type="checkbox"> Custom Checkbox Example
</body>
</html>

এটি নিম্নলিখিত আউটপুট দেয়

CSS উপস্থিতি সম্পত্তি সহ কাস্টম চেকবক্স

উদাহরণ

<!DOCTYPE html>
<html>
   <style>
      input[type=checkbox] {
         appearance: none;
         -webkit-appearance: none;
         -moz-appearance: none;
         padding: 10px;
         background-color: cyan;
         border-radius:5%;
      }
      input[type=checkbox]:checked {
         background-color: magenta;
      }
      input[type=checkbox]:checked:before {
         content:"\2713";
         color: white;
         padding: initial;
         font-weight: bold;
      }
   </style>
<body>
   <input type="checkbox"> Another Custom Checkbox Example
</body>
</html>

এটি নিম্নলিখিত আউটপুট দেয়

CSS উপস্থিতি সম্পত্তি সহ কাস্টম চেকবক্স