स्टाइलिंग टेक्स्ट इनपुट कैरेट

Question

मैं एक ध्यान केंद्रित की शैली को स्टाइल करना चाहता हूं <input type='text'/>। विशेष रूप से, रंग और मोटाई।

Comments

खैर, यह है के लिए <input type="text"/>मैं लगता है

— बेंजामिन Crouzier

वह

— कार्यवाहक

कृपया स्वीकृत उत्तर को बदलने पर विचार करें। नवीनतम सीएसएस परिवर्तनों को देखते हुए, माइकल जैस्पर का अपडेटेड उत्तर अब तक श्रेष्ठ है: stackoverflow.com/a/7339406/1889273

— बोअज़

Answer 1

यदि आप एक वेबकिट ब्राउज़र का उपयोग कर रहे हैं तो आप अगले CSS स्निपेट का अनुसरण करके कैरेट का रंग बदल सकते हैं। मुझे यकीन नहीं है कि अगर सीएसएस के साथ प्रारूप को बदलना संभव है।

input,
textarea {
    font-size: 24px;
    padding: 10px;
    
    color: red;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:
    text-shadow: none;
    -webkit-text-fill-color: initial;
}

यहाँ एक उदाहरण है: http://jsfiddle.net/8k1k0awb/

Comments

एक चतुर हैक, लेकिन इमोजी काम नहीं करते हैं क्योंकि वे केवल छाया से भर जाते हैं,

— सिंबल

हम्म, शेड्स मेरे मामले (डेस्कटॉप क्रोम और एफएफ) में प्रभावी होने के लिए आवश्यक नहीं हैं - बस तत्कालीन इनपुट के पाठ-भरण-रंग को संपादित करें।

— वेल्डा

Answer 2

'कैरट' वह शब्द है जिसकी आप तलाश कर रहे हैं। मुझे विश्वास है कि हालांकि, यह ब्राउज़रों के डिजाइन का हिस्सा है, और सीएसएस की समझ के भीतर नहीं।

हालाँकि, यहाँ जावास्क्रिप्ट और CSS http://www.dynamicdrive.com/forums/showthread.php?t=17450 का उपयोग करते हुए एक लापरवाह बदलाव का अनुकरण करने के बारे में एक दिलचस्प लिखा है, यह मेरे लिए थोड़ा हैकी लगता है, लेकिन शायद एकमात्र तरीका है कार्य पूरा करें। लेख का मुख्य बिंदु है:

हमारे पास दर्शक के दृष्टिकोण से स्क्रीन में कहीं न कहीं एक सादा टेक्सटारिया होगा और जब उपयोगकर्ता हमारे "फर्जी टर्मिनल" पर क्लिक करेगा तो हम टेक्सटेरिया में ध्यान केंद्रित करेंगे और जब उपयोगकर्ता टाइप करना शुरू करेगा तो हम केवल टेक्सटेरिया में टाइप किए गए डेटा को जोड़ देंगे। हमारे "टर्मिनल" और यही है।

यहां कार्रवाई में एक डेमो है

---

2018 अपडेट

एक नई सीएसएस संपत्ति हैcaret-color जो किसी क्षेत्र inputया contenteditableक्षेत्र की देखभाल पर लागू होती है । समर्थन बढ़ रहा है लेकिन 100% नहीं, और यह केवल रंग को प्रभावित करता है, न कि चौड़ाई या अन्य प्रकार की उपस्थिति को।

input{
  caret-color: rgb(0, 200, 0);
}

<input type="text"/>

Answer 3

: CSS3 में, वहाँ अब हैक्स मौजूदा जवाब में सुझाव के किसी भी बिना ऐसा करने के लिए, एक देशी तरीका है संपत्ति ।caret-color

वहाँ कई चीजें हैं जो आप कैरेट के साथ कर सकते हैं, जैसा कि नीचे देखा गया है। यह एनिमेटेड भी हो सकता है ।

/* Keyword value */
caret-color: auto;
color: transparent;
color: currentColor;

/* <color> values */
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

caret-colorसंपत्ति फ़ायरफ़ॉक्स 55 से समर्थित है, और क्रोम 60. समर्थन सफारी तकनीकी पूर्वावलोकन में और ओपेरा (लेकिन एज में अभी तक नहीं) में भी उपलब्ध है। आप यहां मौजूदा सपोर्ट टेबल देख सकते हैं ।

Comments

मुझे पंच मारो। बेशक, यह संपत्ति केवल फ़ायरफ़ॉक्स में काम करेगी, कम से कम अभी के लिए, और अप्रैल 2017 तक रिलीज़ नहीं होगी। इस पृष्ठ को देखें ।

— स्पाइडरस्क्रिप्ट

Answer 4

यहां कुछ वेंडर हैं जिनकी आप मुझे तलाश कर रहे हैं

::-webkit-input-placeholder {color: tomato}
::-moz-placeholder          {color: tomato;} /* Firefox 19+ */
:-moz-placeholder           {color: tomato;} /* Firefox 18- */
:-ms-input-placeholder      {color: tomato;}

आप विभिन्न राज्यों को भी स्टाइल कर सकते हैं, जैसे फोकस

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

आप इस पर कुछ बदलाव भी कर सकते हैं, जैसे

::-VENDOR-input-placeholder       {text-indent: 0px;   transition: text-indent 0.3s ease;}
:focus::-VENDOR-input-placeholder  {text-indent: 500px; transition: text-indent 0.3s ease;}

Comments

यह प्लेचर्ड टेक्स्ट को स्टाइल करने के लिए उपयोगी है, हालांकि यह ओपी संदर्भित ब्लिंकिंग केयर को स्टाइल नहीं करता है।

— क्रेजाइनवेकर्क 13

Answer 5

यह इस तरह से -webkit-text-fill-color के साथ रंग संपत्ति का उपयोग करने के लिए पर्याप्त है :

    input {
        color: red; /* color of caret */
        -webkit-text-fill-color: black; /* color of text */
    }

<input type="text"/>

WebKit ब्राउज़रों में काम करता है (लेकिन iOS सफारी में नहीं, जहां अभी भी कैरेट के लिए सिस्टम कलर का उपयोग किया जाता है) और फ़ायरफ़ॉक्स में भी।

-Webkit- पाठ-भरण-रंग CSS गुण पाठ के वर्णों के भरण रंग को निर्दिष्ट करता है । यदि यह गुण सेट नहीं है, तो रंग गुण का मान उपयोग किया जाता है। MDN

तो इसका मतलब है कि हम टेक्स्ट कलर को टेक्स्ट-फिल-कलर और कैरेट कलर को स्टैंडर्ड कलर प्रॉपर्टी के साथ सेट करते हैं। असमर्थित ब्राउज़र में, कैरेट और टेक्स्ट का एक ही रंग होगा - कैरेट का रंग।