CSS के साथ HTML5 इनपुट के प्लेसहोल्डर रंग को बदलें

3973

Chrome तत्वों पर प्लेसहोल्डर विशेषता का समर्थन करता है input[type=text](अन्य संभवतः भी करते हैं)।

लेकिन निम्नलिखित CSSप्लेसहोल्डर के मूल्य के लिए कुछ भी नहीं करता है:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">
स्निपेट का विस्तार करें

Valueअभी भी बची रहेगी greyबजाय red।

क्या प्लेसहोल्डर टेक्स्ट का रंग बदलने का कोई तरीका है?

css  html  placeholder  html-input 
— डेविड मर्डोक
स्रोत
375
त्वरित शीर्ष-अप (समाधान नहीं, सिर्फ एक FYI): यदि मुझे सही ढंग से याद है, तो इनपुट [प्लेसहोल्डर] सिर्फ <इनपुट> टैग से मेल खाता है जिसमें प्लेसहोल्डर विशेषता है, यह प्लेसहोल्डर विशेषता से मेल नहीं खाता है।
— गुलाबीगुच्छ 19
12
याह, विचार ने मेरे दिमाग को पार कर दिया कि यह एक तत्व के "शीर्षक" विशेषता को स्टाइल करने की कोशिश करने जैसा हो सकता है। तो एक जैसे सोचने के लिए +1!
— डेविड मर्डोक
5
@MathiasBynens : प्लेसहोल्डर-दिखाया गया छद्म वर्ग एक इनपुट तत्व से मेल खाता है जो ऐसे प्लेसहोल्डर टेक्स्ट को दिखा रहा है। इसलिए यह चयनकर्ता की <input>तरह टैग से मेल खाता है input, लेकिन अभी प्लेसहोल्डर टेक्स्ट दिखा रहा है। यह प्लेसहोल्डर विशेषता से भी मेल नहीं खाता है।
— हेक्स
3
@HEX यह inputचयनकर्ता की तरह नहीं है क्योंकि यह सभी inputतत्वों का चयन करता है। :placeholder-shownकेवल inputउन तत्वों का चयन करता है जो वर्तमान में प्लेसहोल्डर को दिखा रहे हैं, जिससे आप केवल उन तत्वों को स्टाइल कर सकते हैं, और प्रभावी रूप से प्लेसहोल्डर टेक्स्ट को स्टाइल कर सकते हैं। तुम क्या कहना चाहते हो?
— मथियास ब्येनेंस
1
@ हेक्स (निश्चित रूप से, यह उन textareaतत्वों का भी चयन करता है जो प्लेसहोल्डर टेक्स्ट दिखा रहे हैं।)
— मैथियास ब्यनेंस

जवाबों:

4807

कार्यान्वयन

तीन अलग-अलग कार्यान्वयन हैं: छद्म तत्व, छद्म वर्ग, और कुछ भी नहीं।

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) और Microsoft Edge एक छद्म तत्व का उपयोग कर रहे हैं ::-webkit-input-placeholder:। [ रेफ ]
  • मोज़िला फ़ायरफ़ॉक्स 4 से 18 एक छद्म वर्ग का उपयोग कर रहा है: :-moz-placeholder( एक बृहदान्त्र)। [ रेफ ]
  • मोज़िला फ़ायरफ़ॉक्स 19+ छद्म तत्व का उपयोग कर रहा है: ::-moz-placeholderलेकिन पुराने चयनकर्ता अभी भी थोड़ी देर के लिए काम करेंगे। [ रेफ ]
  • इंटरनेट एक्सप्लोरर 10 और 11 एक छद्म श्रेणी का उपयोग कर रहे हैं :-ms-input-placeholder:। [ रेफ ]
  • अप्रैल 2017: अधिकांश आधुनिक ब्राउज़र सरल छद्म तत्व [ Ref ] का समर्थन करते हैं::placeholder

Internet Explorer 9 और लोअर placeholderसभी विशेषताओं का समर्थन नहीं करते हैं , जबकि ओपेरा 12 और लोअर प्लेसहोल्डर्स के लिए किसी भी सीएसएस चयनकर्ता का समर्थन नहीं करते हैं ।

सबसे अच्छा कार्यान्वयन के बारे में चर्चा अभी भी चल रही है। छद्म तत्व छाया डोम में वास्तविक तत्वों की तरह काम करते हैं । एक paddingपर एक inputछद्म तत्व के रूप में एक ही पृष्ठभूमि रंग नहीं मिलेगा।

सीएसएस चयनकर्ताओं

एक अज्ञात चयनकर्ता के साथ एक नियम की अनदेखी करने के लिए उपयोगकर्ता एजेंटों की आवश्यकता होती है। चयनकर्ता स्तर 3 देखें :

अमान्य चयनकर्ता वाले चयनकर्ताओं का एक समूह अमान्य है।

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

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">
स्निपेट का विस्तार करें

उपयोग नोट

  • बुरे विरोधाभासों से बचने के लिए सावधान रहें। फ़ायरफ़ॉक्स के प्लेसहोल्डर को कम अपारदर्शिता के साथ डिफ़ॉल्ट होना प्रतीत होता है, इसलिए opacity: 1यहां उपयोग करने की आवश्यकता है।
  • ध्यान दें कि प्लेसहोल्डर टेक्स्ट सिर्फ कट जाता है यदि वह फिट नहीं होता है - अपने इनपुट तत्वों को आकार दें emऔर उन्हें बड़े न्यूनतम फ़ॉन्ट आकार सेटिंग्स के साथ परीक्षण करें। अनुवाद न भूलें: कुछ भाषाओं को एक ही शब्द के लिए अधिक कमरे की आवश्यकता होती है ।
  • HTML समर्थन वाले ब्राउज़र placeholderलेकिन उसके बिना CSS समर्थन (जैसे ओपेरा) के लिए भी परीक्षण किया जाना चाहिए।
  • कुछ ब्राउज़र कुछ inputप्रकारों ( email, search) के लिए अतिरिक्त डिफ़ॉल्ट सीएसएस का उपयोग करते हैं । ये अनपेक्षित तरीकों से प्रतिपादन को प्रभावित कर सकते हैं। गुणों का उपयोग करें -webkit-appearanceऔर -moz-appearanceइसे बदलने के लिए। उदाहरण:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
— FUXIA
स्रोत
27
यह भी ध्यान दें कि हालांकि वेबकिट इसे विशिष्ट विशिष्टता मानता है, लेकिन मोज़िला नहीं करता है। आपको कुछ पॉप करने की संभावना है! चीजों को दिखाने के लिए वहाँ आयातकों को लाना होगा।
— dmnc
18
@toscho: महान जवाब के लिए धन्यवाद। मुझे बस "लाइव" प्रदर्शन की थोड़ी जरूरत थी, इसलिए आपका उदाहरण यहां भी दिया जा सकता है: jsfiddle.net/Sk8erPeter/KyVXK । एक बार फिर धन्यवाद।
— Sk8erPeter
90
फ़ायरफ़ॉक्स का प्लेसहोल्डर कम अपारदर्शिता के साथ डिफ़ॉल्ट रूप से प्रकट होता है। किसी और के लिए मुश्किल-ताज़ा और सोच रहा था कि यह क्यों काम नहीं करता है ("मेरा सफेद पाठ अभी भी ग्रे क्यों है .."), अपारदर्शिता का उपयोग करें: 1
— jwinn
8
IE10 में *:-ms-input-placeholderऔर :-ms-input-placeholderखुद से काम नहीं करता है, लेकिन INPUT:-ms-input-placeholderकरता है। अजीब।
— Jared
37
बूटस्ट्रैप 3 के लिए ध्यान दें: सीएसएस विशिष्टता (यानी "फॉर्म-कंट्रोल :: - वेबकिट-इनपुट-प्लेसहोल्डर") के कारण "फॉर्म-कंट्रोल" वर्ग रंग को ओवरराइड करता है, इसलिए आपको कम से कम विशिष्ट या उपयोग करने की आवश्यकता है! " अपने सीएसएस में। (यह न तो फायरबग के रूप में डिबग करने के लिए नरक था और न ही देवटूल इस छद्म वर्ग को दिखाने के लिए प्रतीत होते हैं)
— कोस्टा
724 

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>
स्निपेट का विस्तार करें

यह सभी inputऔर textareaप्लेसहोल्डर्स को स्टाइल देगा ।

महत्वपूर्ण नोट: इन नियमों को समूह में न रखें । इसके बजाय, प्रत्येक चयनकर्ता के लिए एक अलग नियम बनाएं (समूह में एक अमान्य चयनकर्ता पूरे समूह को अमान्य बनाता है)।

— शानदार
स्रोत
2
MSDN ने आपको जो लिंक दिया है, वह इंटरनेट एक्सप्लोरर 10 में एकमात्र समर्थित है। फिर भी एक अच्छा खोज है, लेकिन जब तक IE10 यूजरबेस महत्वपूर्ण नहीं हो जाता है, तब तक बहुत उपयोगी नहीं है (हम इसके लिए वर्षों के समय-सीमा को देख सकते हैं)।
— danishgoel
1
वास्तविक रूप से, आप समान रूप से साइट पर प्लेसहोल्डर्स को स्टाइल करना चाहते हैं, आईडी द्वारा प्रत्येक व्यक्तिगत इनपुट को स्टाइल नहीं करना चाहते हैं।
— BadHorsie
10
FF19 के बाद आपको ::
— moz-
1
आपको इस सीएसएस को अपने स्टाइलशीट में सबसे नीचे रखना होगा, अगर आप आईई (11) पर काम करने के लिए इनपुट पर एक क्लास भी लगाते हैं। इस कांटे को JSFiddle jsfiddle.net/9kkef पर देखें । IE और अन्य ब्राउज़र दोनों में पृष्ठ खोलें, IE में आप देखेंगे कि प्लेसहोल्डर पाठ लागू वर्ग के रंग में होगा।
— तिमो ००२
कभी-कभी अगर काम नहीं कर रहा है, तो कृपया रंग संपत्ति में <! महत्वपूर्ण> जोड़ें।
— अहमद न।
277

तुम भी textareas शैली करना चाहते हो सकता है:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
— मैट
स्रोत
2
क्रोम में मुद्रण पर काम नहीं करता है ... कोई भी मदद @media प्रिंट {इनपुट [प्रकार = पाठ] .form-control :: - वेबकिट-इनपुट-प्लेसहोल्डर, इनपुट [प्रकार = textarea] .form-control :: - webkit। -इनपुट-प्लेसहोल्डर {color: #FFFFFF; }}
— महदी अलखतीब
107

के लिए बूटस्ट्रैप और कम उपयोगकर्ताओं, वहाँ एक mixin .placeholder है:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
— EIIPII
स्रोत
16
या और भी सरल, चर को संपादित करें @input-color-placeholder- आमतौर पर चर
— विलियम
@William चयनकर्ता को परिभाषित करना और वापस जाने से बचने के लिए मिक्सिन का उपयोग करना आसान नहीं होगा और यदि आप किसी अन्य इनपुट के प्लेसहोल्डर को एक अलग रंग बनाने के लिए देख रहे हैं तो इसे बदल दें?
— ब्रैंडिटो
@ ब्रैंडिटो - जो एक किनारे के मामले की तरह लगता है - आमतौर पर प्लेसहोल्डर रंग एक डिज़ाइन के भीतर सभी फॉर्म तत्वों के लिए समान होता है।
— विलियम
@William क्षमा करें, मैं इस तरह के सामान को खराब कर रहा हूं, मैंने सोचा कि इनपुट कलर के तर्क के साथ मिक्सिन का उपयोग करना बेहतर होगा जो आप चाहते हैं, हालांकि काफी ईमानदारी से, मैं शायद किनारे के मामलों के बारे में सोच रहा हूं ' मी टू (सर्च इनपुट प्लेसहोल्डर को स्टाइल करते हुए जहां यह एक रंगीन पृष्ठभूमि पर है: P) इतना खेद है लेकिन आप सही हैं, माफी मांगते हैं।
— ब्रैंडिटो
99

इस जवाब के अलावा, मैंने देखा है कि क्रोम के साथ क्रोम 9-10 और सफारी 5 के बीच कुछ वेबकिट विसंगतियों पर सीएसएस संपत्तियों का समर्थन किया गया है जो ध्यान देने योग्य हैं।

विशेष रूप से क्रोम 9 और 10 का समर्थन नहीं करते background-color, border, text-decorationऔर text-transformजब प्लेसहोल्डर स्टाइल।

पूर्ण क्रॉस-ब्राउज़र तुलना यहां है ।

— ajcw
स्रोत
76

के लिए सास उपयोगकर्ताओं:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}
— कोंस्ट_
स्रोत
अधिक लचीला तरीका - उपयोग करने के लिए@content;
— दूधोव्स्की
60

यह ठीक काम करेगा। यहाँ डेमो:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />
स्निपेट का विस्तार करें

— त्रिवेदी को प्यार
स्रोत
1
मुझे फ़ायरफ़ॉक्स v56 में महत्वपूर्ण जोड़ना था
— सैवेज
49

फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में, सामान्य इनपुट टेक्स्ट का रंग प्लेसहोल्डर्स की रंग संपत्ति को ओवरराइड करता है। तो, हमें करने की आवश्यकता है

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
— डायोनिसियोस अरविनाइटिस
स्रोत
41

क्रॉस-ब्राउज़र समाधान:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

साभार: डेविड वाल्श

— क्रिस्टियन
स्रोत
41

::placeholderयदि आप ऑटोप्रिफ़र का उपयोग करते हैं तो नया प्रयोग करें ।

ध्यान दें कि बूटस्ट्रैप से .होल्डर मिक्सिन को इसके पक्ष में हटा दिया जाता है।

उदाहरण:

input::placeholder { color: black; }

ऑटोप्रिफ़र का उपयोग करते समय उपरोक्त सभी ब्राउज़रों के लिए सही कोड में परिवर्तित हो जाएगा।

— hitautodestruct
स्रोत
40

अब हमारे पास एक इनपुट प्लेसहोल्डर के लिए CSS लागू करने का एक मानक तरीका है: इस CSS मॉड्यूल स्तर 4 ड्राफ्ट ::placeholderसे छद्म तत्व ।

— user3790069
स्रोत
यह फ़ायरफ़ॉक्स 51 में काम करता है। मैं बस इस पद्धति का उपयोग करने जा रहा हूं; अन्य ब्राउज़र मेरे लिए बहुत जल्द पकड़ लेंगे (यह देखते हुए कि यदि मानक शैली लागू नहीं की गई है तो कोई कार्यक्षमता नहीं टूटी है)।
— लोनी बेस्ट
36

मुझे सिर्फ मोज़िला फ़ायरफ़ॉक्स 19+ के लिए कुछ महसूस होता है कि ब्राउज़र प्लेसहोल्डर के लिए एक अस्पष्टता मूल्य देता है, इसलिए रंग वह नहीं होगा जो वास्तव में चाहते हैं।

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

मैं opacity1 के लिए ओवरराइट करता हूं , इसलिए जाना अच्छा रहेगा।

— बुराक टोकक
स्रोत
35

मुझे याद नहीं है कि मैंने इंटरनेट पर यह कोड स्निपेट कहां पाया है (यह मेरे द्वारा नहीं लिखा गया था, मुझे यह नहीं याद है कि मैंने इसे कहां पाया है, न ही जिसने लिखा है)।

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

बस इस जावास्क्रिप्ट कोड को लोड करें और फिर इस नियम को कॉल करके अपने प्लेसहोल्डर को CSS के साथ संपादित करें:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}
— ड्रैगोस राइजस्कु
स्रोत
3
यह करने का पुराना तरीका है, जिसे मैंने काफी इस्तेमाल किया है। नुकसान यह है कि जब आप ध्यान केंद्रित करते हैं तो प्लेसहोल्डर टेक्स्ट गायब हो जाता है। मैंने पाया है कि जब यूआई इनपुट के बगल में लेबल भी शामिल नहीं करता है तो यह कष्टप्रद होता है। पिछले कई महीनों में मैंने प्लेसहोल्डर टेक्स्ट का उपयोग करके इस पद्धति को बदलना शुरू कर दिया है, जो मुझे लगता है कि एक यूएक्स सुधार है।
— Redtopia
4
कोड के साथ दूसरी समस्या यह है कि आपके सर्वरसाइड कोड को प्लेसहोल्डर टेक्स्ट से खाली इनपुट के रूप में निपटना पड़ता है, जिसमें किनारे के मामलों की समस्या होती है, जहां आप "टाउन" नामक शहर में प्रवेश करना चाहते हैं। प्लेसहोल्डर टेक्स्ट के खिलाफ मानों की जाँच करने के बजाय, आपको वास्तव में इनपुट पर डेटा-संशोधित ध्वज का उपयोग करना चाहिए, और फिर फ़्लैग सेट नहीं होने पर फ़ॉर्म सबमिट पर इनपुट साफ़ करें। और AJAX इंटरफेस के लिए आपके पास एक फॉर्म भी नहीं हो सकता है, इसलिए आपको इनपुट के साथ एक मनमाने ढंग से जमा करने की घटना को जोड़ने में सक्षम होना चाहिए। यह उन सरल स्थितियों में से एक है जो नहीं है।
— Whelkaholism
34

मुझे लगता है कि यह कोड काम करेगा क्योंकि एक प्लेसहोल्डर की जरूरत केवल इनपुट टाइप टेक्स्ट के लिए होती है। तो यह सीएसएस सीएसएस आपकी जरूरत के लिए पर्याप्त होगा:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}
— अलियास वर्गीज
स्रोत
अब यह प्रयोग न करें। प्लेसहोल्डर और अधिक उपसर्गों के साथ कई और तत्व हैं। ऊपर दिए गए समाधान देखें या ::placeholderऑटोप्रिफ़र के साथ मिलकर उपयोग करें ।
— RiZKiT
33

के लिए बूटस्ट्रैप उपयोगकर्ताओं, यदि आप उपयोग कर रहे हैं class="form-control", वहाँ एक सीएसएस विशिष्टता मुद्दा हो सकता है। आपको एक उच्च प्राथमिकता मिलनी चाहिए:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

या यदि आप कम उपयोग कर रहे हैं :

.form-control{
    .placeholder(red);
}
— gfaceless
स्रोत
19

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं और यह काम नहीं कर पा रहा है, तो शायद आपने इस तथ्य को याद किया कि बूटस्ट्रैप ही इन चयनकर्ताओं को जोड़ता है। यह बूटस्ट्रैप v3.3 है जिसके बारे में हम बात कर रहे हैं।

यदि आप एक .form- नियंत्रण सीएसएस वर्ग के अंदर प्लेसहोल्डर को बदलने की कोशिश कर रहे हैं, तो आपको इसे इस तरह से ओवरराइड करना चाहिए:

.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #777;
}
.form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #777;
    opacity:  1;
}
.form-control::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #777;
    opacity:  1;
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #777;
}
— स्थिर_डैडी
स्रोत
17

यह छोटा और साफ कोड:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}
— BANTIMATHUR
स्रोत
17

इस बारे में कैसा है

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />
स्निपेट का विस्तार करें

कोई CSS या प्लेसहोल्डर नहीं है, लेकिन आपको समान कार्यक्षमता मिलती है।

— user1729061
स्रोत
15
यदि कोई कुछ लिखने के बाद फिर से क्लिक करता है तो क्या होता है .. जो मूल पाठ उन्होंने लिखा है वह चला जाएगा!
— लकी सोनी
3
@ लकीसोनी आप ऐसा कर सकते थे , लेकिन मैं व्यक्तिगत रूप से पहले वाले को पसंद करता हूं। <input type="text" value="placeholder text" onfocus="if(!this.haswriting){this.style.color='#000'; this.value='';}" onblur="if(!this.value){this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;}else{this.haswriting=true};" style="color: #f00;"/>
— user1729061
9
यहां तक ​​कि आपका दूसरा संस्करण भी समान कार्यक्षमता प्रदान नहीं करता है। यदि उपयोगकर्ता <form>इस इनपुट के साथ सबमिट करता है तो प्लेसहोल्डर टेक्स्ट सर्वर पर भेजा जाएगा। मैंने देखा कि कई साइटें यह गलत करती हैं।
— LQC
यह खतरनाक है! यदि आप फिर से उस रूप में लौट आते हैं, जिसमें आपने अपना सब कुछ खो दिया!
— मोबारक अली
15

मैंने अपने मोबाइल प्लेटफ़ॉर्म पर रंग बदलने के लिए हर संयोजन की कोशिश की है, और अंततः यह था:

-webkit-text-fill-color: red;

जिसने चाल चली।

— aviram83
स्रोत
2
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill.यह मुझे लगता है जैसे आपको कुछ अन्य सीएसएस नियम मिला है जो colorसंपत्ति सेट कर रहा है।
— डेविड मर्डोक
8

Bourbon का उपयोग करने वाले SASS / SCSS उपयोगकर्ता के लिए , इसमें एक अंतर्निहित फ़ंक्शन है।

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

सीएसएस आउटपुट, आप इस हिस्से को भी पकड़ सकते हैं और अपने कोड में पेस्ट कर सकते हैं।

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
— trungk18
स्रोत
8

विभिन्न इनपुट तत्व अलग शैली के लिए इस कोड को आज़माएं

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

उदाहरण 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

उदाहरण 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }
— मो। अबू सईद
स्रोत
5

एक वास्तविक बहुत अच्छी और सरल संभावना जोड़ना: सीएसएस फिल्टर !

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें

यह सब कुछ स्टाइल करेगा, जिसमें प्लेसहोल्डर भी शामिल है।

निम्नलिखित रंग बदलने के लिए ह्यू फिल्टर का उपयोग करके, एक ही पैलेट पर दोनों इनपुट सेट करेगा। यह अब ब्राउज़रों में बहुत अच्छी तरह से (छोड़कर ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />
स्निपेट का विस्तार करें

उपयोगकर्ताओं को परिवर्तन के लिए इनपुट प्रकार के रंग का उपयोग करके या बारीकियों को खोजने के लिए इसे गतिशील रूप से बदलने की अनुमति देने के लिए, इस स्निपेट को देखें:

प्रेषक: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>
स्निपेट का विस्तार करें

सीएसएस फिल्टर डॉक्स: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

— क्रिप्टोपाट को संशोधित करता है
स्रोत
4

ठीक है, प्लेसहोल्डर विभिन्न ब्राउज़रों में अलग-अलग व्यवहार करते हैं, इसलिए आपको उन्हें समान बनाने के लिए अपने सीएसएस में ब्राउज़र उपसर्ग का उपयोग करने की आवश्यकता है, उदाहरण के लिए फ़ायरफ़ॉक्स डिफ़ॉल्ट रूप से प्लेसहोल्डर को एक पारदर्शिता देता है, इसलिए आपके सीएसएस में अस्पष्टता 1 जोड़ने की आवश्यकता है, साथ ही रंग, यह नहीं है। अधिकांश समय एक बड़ी चिंता, लेकिन उनके अनुरूप होना अच्छा है:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}
— एलिरेज़ा
स्रोत
3

आप CSS के साथ HTML5 इनपुट के प्लेसहोल्डर रंग को बदल सकते हैं। यदि संयोग से, आपका सीएसएस संघर्ष, यह कोड नोट काम कर रहा है, तो आप नीचे दिए गए (महत्वपूर्ण) उपयोग कर सकते हैं।

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#909 !important;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:#909 !important;
   opacity:1 !important;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#909 !important;
   opacity:1 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#909 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:#909 !important;
}

<input placeholder="Stack Snippets are awesome!">

आशा है कि यह मदद करेगा।

— दीपक कुमार
स्रोत
3

आप इसे इनपुट और फ़ोकस शैली के लिए उपयोग कर सकते हैं:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
— fraweb
स्रोत
2

सबसे आसान तरीका होगा:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}
— codeWithMe
स्रोत
1

यहाँ CSS चयनकर्ताओं के साथ समाधान है

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
  • WebKit, Blink (Safari, Google Chrome, Opera 15+) और Microsoft Edge एक छद्म तत्व का उपयोग कर रहे हैं:
    :: - webkit-input-प्लेसहोल्डर।
  • मोज़िला फ़ायरफ़ॉक्स 4 से 18 एक छद्म वर्ग का उपयोग कर रहा है
    :: -मोज़-प्लेसहोल्डर (एक कोलन)।
    मोज़िला फ़ायरफ़ॉक्स 19+ छद्म तत्व का उपयोग कर रहा है:
    :: - मोज-प्लेसहोल्डर, लेकिन पुराने चयनकर्ता अभी भी थोड़ी देर के लिए काम करेंगे।
  • इंटरनेट एक्सप्लोरर 10 और 11 एक छद्म वर्ग का उपयोग कर रहे हैं
    : -ms-इनपुट-प्लेसहोल्डर।
  • Internet Explorer 9 और निचला प्लेसहोल्डर विशेषता का समर्थन नहीं करता है, जबकि Opera 12 और निचला प्लेसहोल्डर के लिए किसी भी CSS चयनकर्ता का समर्थन नहीं करता है।
— मोहम्मद अयूब खान
स्रोत
0

HTML का एक हिस्सा: 

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

मैं यह दिखाता हूं कि CSS द्वारा 'वाक्य दर्ज करें' की अभिव्यक्ति का रंग कैसे बदला जाए:

  ::placeholder{
  color:blue;
   }
— dev_cc
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.