আমরা appearance প্রোপার্টি ব্যবহার করে একটি এলিমেন্টকে ইউজারের অপারেটিং সিস্টেমের প্ল্যাটফর্ম-নেটিভ স্টাইলে স্টাইল করি।
সিনট্যাক্স
CSS appearance প্রোপার্টির সিনট্যাক্স নিচের মতো:
Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*Safari এবং Chrome-এর জন্য*/ -moz-appearance: /*value*/; /*Firefox-এর জন্য*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS appearance প্রোপার্টি ব্যাখ্যা করে।
<!DOCTYPE html> <html> <head> <style> input[type=number] { width: 40px; -moz-appearance: textfield; } input[type=number]:hover { background-color: #e3f5a1; } input::-webkit-inner-spin-button { -webkit-appearance: none; } </style> </head> <body> <p>Type/Scroll to change value</p> <input type="number" value="6"> </body> </html>
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> select { width: 20%; appearance: none; -webkit-appearance: none; -moz-appearance: none; } </style> </head> <body> Hiding dropdown arrow<br/><br/> <select> <option value="none" selected disabled hidden> Select color </option> <option>Red</option> <option>Blue</option> <option>Green</option> <option>Yellow</option> <option>Orange</option> </select> </body> </html>
এটি নিচের আউটপুট দেয়:
