আমরা ব্যবহারকারীর অপারেটিং সিস্টেমের প্ল্যাটফর্ম-নেটিভ শৈলী অনুযায়ী একটি উপাদান স্টাইল করতে appearance প্রপার্টি ব্যবহার করি।
সিনট্যাক্স
CSS appearance প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /* Safari এবং Chrome-এর জন্য */ -moz-appearance: /*value*/; /* Firefox-এর জন্য */ }উদাহরণ
নিচের উদাহরণগুলো CSS appearance প্রপার্টি ব্যাখ্যা করে।
<!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"> কাস্টম চেকবক্স উদাহরণ </body> </html>এটি নিচের আউটপুট দেয়:
উদাহরণ
<!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"> অন্য একটি কাস্টম চেকবক্স উদাহরণ </body> </html>এটি নিচের আউটপুট দেয়:
