सीएसएस उपस्थिति संपत्ति के साथ कस्टम रेडियो बटन

<घंटा/>

हम उपयोगकर्ता के ऑपरेटिंग सिस्टम की प्लेटफ़ॉर्म-देशी शैली के अनुसार किसी तत्व को स्टाइल करने के लिए अपीयरेंस प्रॉपर्टी का उपयोग करते हैं।

सिंटैक्स

CSS अपीयरेंस प्रॉपर्टी का सिंटैक्स इस प्रकार है -

<पूर्व>चयनकर्ता {उपस्थिति:/*मान*/; -वेबकिट-उपस्थिति:/*मूल्य*/; /*Safari और Chrome के लिए */ -moz-appearance:/*value*/; /*फ़ायरफ़ॉक्स के लिए */}

उदाहरण

निम्नलिखित उदाहरण CSS प्रकटन गुण को दर्शाते हैं।

 <शैली> इनपुट[टाइप=रेडियो] { दिखावट:कोई नहीं; -वेबकिट-उपस्थिति:कोई नहीं; -मोज़-उपस्थिति:कोई नहीं; पैडिंग:10px; पृष्ठभूमि-रंग:नारंगी; सीमा-त्रिज्या:50%; } इनपुट [प्रकार =रेडियो]:चेक किया गया {पृष्ठभूमि-रंग:मैजेंटा; } इनपुट [प्रकार =रेडियो]:होवर {कर्सर:सूचक; }   कस्टम रेडियो बटन उदाहरण
  <लेबल for="r1">r1  <इनपुट प्रकार ="रेडियो" आईडी ="r2" नाम ="btn" मान ="v2"> <लेबल for="r2">r2 
  
 यह निम्न आउटपुट देता है
 
 
 उदाहरण
  <शैली> लेबल { डिस्प्ले:फ्लेक्स; संरेखित-आइटम:शीर्ष; } लेबल इनपुट { मार्जिन:0px 10px 0px 10px; } इनपुट [प्रकार =चेकबॉक्स] {उपस्थिति:कोई नहीं; -मोज़-उपस्थिति:कोई नहीं; -वेबकिट-उपस्थिति:कोई नहीं; सीमा:3px रिज करंटकलर; सीमा-त्रिज्या:60px; बॉक्स-आकार:सामग्री-बॉक्स; रंग:हल्का नीला; ऊंचाई:60 पीएक्स; पैडिंग:2px 2px 2px 2px; संक्रमण-अवधि:280ms; संक्रमण-संपत्ति:सीमा-रंग, रंग; संक्रमण-समय-कार्य:आसानी; चौड़ाई:20px; } इनपुट [प्रकार =चेकबॉक्स]:चेक किया गया {रंग:हल्का हरा; } इनपुट [प्रकार =चेकबॉक्स] ::के बाद {पृष्ठभूमि-रंग:वर्तमान रंग; सीमा-त्रिज्या:10px 10px 10px 10px; विषय:""; प्रदर्शन क्षेत्र; ऊंचाई:20 पीएक्स; ट्रांसफॉर्म:ट्रांसलेट वाई (0 पीएक्स); संक्रमण:300ms आसानी से रूपांतरित करें; चौड़ाई:20 पीएक्स; } इनपुट [प्रकार =चेकबॉक्स]:चेक किया गया ::के बाद {रूपांतरण:अनुवाद वाई (40 पीएक्स); }   
 कस्टम रेडियो बटन उदाहरण <लेबल for="crb"> नीला <इनपुट id="crb" type="checkbox"/> 


 हरा  
 
 
 यह निम्न आउटपुट देता है