আমরা ব্যবহারকারীর অপারেটিং সিস্টেমের প্ল্যাটফর্ম-নেটিভ শৈলী অনুযায়ী একটি উপাদান স্টাইল করতে appearance প্রপার্টি ব্যবহার করি।
সিনট্যাক্স
CSS appearance প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো:
Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /* Safari এবং Chrome-এর জন্য */ -moz-appearance: /*value*/; /* Firefox-এর জন্য */ }উদাহরণ
নিচের উদাহরণগুলো CSS appearance প্রপার্টি ব্যাখ্যা করে।
<!DOCTYPE html> <html> <style> input[type=radio] { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 10px; background-color: orange; border-radius:50%; } input[type=radio]:checked { background-color: magenta; } input[type=radio]:hover { cursor: pointer; } </style> <body> কাস্টম রেডিও বাটন উদাহরণ<br/> <form> <label for="r1">r1</label> <input type="radio" id="r1" name="btn" value="v1"> <input type="radio" id="r2" name="btn" value="v2"> <label for="r2">r2</label> </form> </body> </html>এটি নিচের আউটপুট দেয়:
উদাহরণ
<!DOCTYPE html> <html> <style> label { display: flex; align-items: top; } label input { margin: 0px 10px 0px 10px; } input[type=checkbox] { appearance: none; -moz-appearance: none; -webkit-appearance: none; border: 3px ridge currentcolor; border-radius: 60px; box-sizing: content-box; color: lightblue; height: 60px; padding: 2px 2px 2px 2px; transition-duration: 280ms; transition-property: border-color, color; transition-timing-function: ease; width: 20px; } input[type=checkbox]:checked { color: lightgreen; } input[type=checkbox]::after { background-color: currentcolor; border-radius: 10px 10px 10px 10px; content: ""; display: block; height: 20px; transform: translateY(0px); transition: transform 300ms ease-in; width: 20px ; } input[type=checkbox]:checked::after { transform: translateY(40px); } </style> <body> <p> কাস্টম রেডিও বাটন উদাহরণ <label for="crb"> নীল <input id="crb" type="checkbox"/> <br/><br/><br/>সবুজ </label> </p> </body> </html>এটি নিচের আউটপুট দেয়:
