देखभाल-आकार - सीएसएस-ट्रिक्स

Anonim

caret-shapeसीएसएस में संपत्ति संपादन योग्य तत्वों के अंदर पाठ कर्सर कि इंगित करता है एक उपयोगकर्ता लिख रहा है के आकार बदल जाता है। यह CSS बेसिक यूजर इंटरफेस मोड्यूल लेवल 4 का हिस्सा है, जो वर्तमान में वर्किंग ड्राफ्ट स्थिति में है।

जैसा कि मैं लिखता हूं, कैरेट थोड़ा ब्लिंकिंग बार है जो प्रत्येक चरित्र का अनुसरण करता है जो मैं टाइप करता हूं।

हम caret-shapeउस पट्टी को किसी और चीज़ में बदलने के लिए उपयोग कर सकते हैं , जैसे, एक ब्लॉक:

.element ( caret-shape: block; )

कमांड लाइन में टाइप करते समय आप जो देख सकते हैं, वह अधिक ध्यान रखने वाला एक कैरेट उत्पन्न करेगा:

वाक्य - विन्यास

caret-shape: auto | bar | block | underscore
  • प्रारंभिक मूल्य: auto
  • उन पर लागू होता है: ऐसे तत्व जो इनपुट स्वीकार करते हैं
  • इन्हेरिटेड: हाँ
  • प्रतिशत: n / a
  • कंप्यूटेड वैल्यू: निर्दिष्ट कीवर्ड
  • एनीमेशन प्रकार: गणना मूल्य द्वारा

मूल्यों

caret-shape: auto; caret-shape: bar; caret-shape: block; caret-shape: underscore;

हमारे पास caret-shapeफिलहाल (नीचे देखें) के लिए बहुत सारे ब्राउज़र समर्थन नहीं हैं , लेकिन यहां उन मूल्यों का प्रतिपादन है।

caret-shape: bar;
caret-shape: block;
caret-shape: underscore;

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

ऐसा प्रतीत नहीं होता है कि कोई डेटा कैनीयूज़ में उपलब्ध है, लेकिन कुछ त्वरित परीक्षण के साथ, यहां मैंने जो पाया है:

अर्थात एज फ़ायर्फ़ॉक्स क्रोम सफारी ओपेरा
नहीं न नहीं न नहीं न नहीं न नहीं न सब
Android क्रोम Android फ़ायरफ़ॉक्स Android ब्राउज़र iOS सफारी ओपेरा मोबाइल
नहीं न नहीं न नहीं न नहीं न नहीं न

हम इसे "नकली" कर सकते हैं

जबकि ब्राउज़र समर्थन यह क्या है, हम वास्तव में अन्य सीएसएस जादू के साथ प्रभाव को दोहरा सकते हैं।

यह इस प्रकार का है जो इस टाइपराइटर एनीमेशन पर उपयोग किया जाता है:

अधिक जानकारी

  • CSS बेसिक यूजर इंटरफेस मॉड्यूल लेवल 4 (वर्किंग ड्राफ्ट)

संबंधित गुण

27 जनवरी, 2021 को पंचांग

कैरट

.element ( caret: #ff7a18 underscore; ) क्रिस कॉयर