उपस्थिति - सीएसएस-ट्रिक्स

Anonim

appearanceसंपत्ति एक मंच देशी उपयोगकर्ताओं के ऑपरेटिंग सिस्टम के विषय पर आधारित स्टाइल का उपयोग कर एक तत्व प्रदर्शित करने के लिए प्रयोग किया जाता है।

.thing ( -webkit-appearance: value; -moz-appearance: value; appearance: value; )

यह उपसर्ग शुरू हो रहा है, जो बहुत अच्छा है क्योंकि यहां क्रॉस-ब्राउज़र कहानी बहुत जटिल है।

appearanceसंपत्ति दो किसी एक कारण से प्रयोग किया जाता है:

  1. ऐसे तत्व को प्लेटफ़ॉर्म-विशिष्ट स्टाइल लागू करने के लिए, जिसके पास डिफ़ॉल्ट रूप से नहीं है
  2. एक तत्व के लिए प्लेटफ़ॉर्म-विशिष्ट स्टाइल को हटाने के लिए जो इसे डिफ़ॉल्ट रूप से होता है

उदाहरण के लिए, type=searchडिफ़ॉल्ट रूप से WebKit ब्राउज़रों में इनपुट के साथ गोल कोनों होते हैं और आप सीएसएस के माध्यम से जो कुछ भी बदल सकते हैं उसमें बहुत सख्त हैं। यदि आप उस स्टाइल को नहीं चाहते हैं, तो आप इसे एक झटके में हटा सकते हैं।

input(type=search) ( -webkit-appearance: none; )

या आप टाइप = पाठ के साथ एक इनपुट ले सकते हैं और बस इसे खोज इनपुट की तरह बना सकते हैं:

input(type=text) ( -webkit-appearance: searchfield; )

WebKit मान

  • चेक बॉक्स
  • रेडियो
  • बटन दबाओ
  • वर्ग-बटन
  • बटन
  • बटन
  • सूची बाक्स
  • सामग्री सूचीबद्ध करें
  • पुरुषवादी
  • menulist- बटन
  • menulist- पाठ
  • Menulist-Textfield
  • स्क्रॉलबारबटन-अप
  • स्क्रॉलबारबटन-डाउन
  • स्क्रॉलबारबटन-वाम
  • स्क्रॉलबारबटन-राइट
  • स्क्रॉलबार्ट्रैक-क्षैतिज
  • स्क्रैबट्रैक-वर्टिकल
  • स्क्रॉलबारथ-क्षैतिज
  • स्क्रॉलबथ-वर्टिकल
  • स्क्रॉलबारग्रीपर-क्षैतिज
  • स्क्रॉलबारग्रीपर-वर्टिकल
  • स्लाइडर-क्षैतिज
  • स्लाइडर-ऊर्ध्वाधर
  • स्लाइडरथंब-क्षैतिज
  • स्लाइडरथंब-वर्टिकल
  • कैरट
  • खोज क्षेत्र
  • सर्चफील्ड-सजावट
  • सर्चफील्ड-परिणाम-सजावट
  • सर्चफील्ड-परिणाम-बटन
  • सर्चफील्ड-रद्द-बटन
  • पाठ का क्षेत्र
  • पाठ क्षेत्र

मोज़िला मूल्यों

  • कोई नहीं
  • बटन
  • चेक बॉक्स
  • चेकबॉक्स-कंटेनर
  • चेकबॉक्स-छोटा
  • संवाद
  • सूची बाक्स
  • मेनू आइटम
  • पुरुषवादी
  • menulist- बटन
  • Menulist-Textfield
  • रजोनिवृत्ति
  • प्रोगेस बार
  • रेडियो
  • रेडियो-कंटेनर
  • रेडियो-छोटा
  • रीसाइज़र
  • स्क्रॉल पट्टी
  • स्क्रॉलबारबटन-डाउन
  • स्क्रॉलबारबटन-वाम
  • स्क्रॉलबारबटन-राइट
  • स्क्रॉलबारबटन-अप
  • स्क्रॉलबार्ट्रैक-क्षैतिज
  • स्क्रैबट्रैक-वर्टिकल
  • सेपरेटर
  • स्टेटस बार
  • टैब
  • टैब-लेफ्ट-एज अप्रचलित
  • झांकी
  • पाठ का क्षेत्र
  • टेक्स्टफील्ड-मल्टीलाइन
  • उपकरण पट्टी
  • टूलबारबटन
  • उपकरण बॉक्स
  • -मोज़-मैक-यूनिफाइड-टूलबार
  • -मोज़-विन-बॉर्डरलेस-ग्लास
  • -मोज़-विन-ब्राउज़रटैबर-टूलबॉक्स
  • -मोज़-विन-कम्यूनिकेशन-टूलबॉक्स
  • -मोज़-विन-ग्लास
  • -मोज़-विन-मीडिया-टूलबॉक्स
  • टूलटिप
  • ट्रीहाइडरसेलड
  • ट्रीहेडर्सट्रो
  • पेड़ का पेड़
  • अभिवादन
  • treetwistyopen
  • ट्री व्यू
  • खिड़की

साधन

  • -मोज़-उपस्थिति के लिए मोज़िला डॉक्स
  • वेबकिट सूरत पर ट्रेंट वाल्टन
  • IPad पर पाठ इनपुटों के आंतरिक पाठ छाया को अक्षम करने पर शॉन इनमैन
  • CSS3 कल्पना

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम फ़ायर्फ़ॉक्स अर्थात एज सफारी
83 * 80 नहीं न 83 * टीपी *

मोबाइल / टेबलेट

Android क्रोम Android फ़ायरफ़ॉक्स एंड्रॉयड iOS सफारी
88 85 * 81 * 14.0-14.4 *