हम appearance प्रॉपर्टी का उपयोग यूजर के ऑपरेटिंग सिस्टम के प्लेटफॉर्म-नेटिव स्टाइल के अनुसार एलिमेंट को स्टाइल करने के लिए करते हैं।
सिंटैक्स
CSS appearance प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { appearance: /*value*/; -webkit-appearance: /*value*/; /*Safari और Chrome के लिए*/ -moz-appearance: /*value*/; /*Firefox के लिए*/ }
उदाहरण 1
निम्न उदाहरण 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"> Custom Checkbox Example </body> </html>
इससे निम्न आउटपुट मिलता है:
उदाहरण 2 (चेकमार्क के साथ)
<!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>
इससे निम्न आउटपुट मिलता है:
