सवाल सीएसएस के साथ एक एचटीएमएल 5 इनपुट प्लेसहोल्डर रंग बदलें


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

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

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

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


3600
2018-04-09 20:36


मूल


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


जवाब:


कार्यान्वयन

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

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

इंटरनेट एक्सप्लोरर 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 और उन्हें न्यूनतम न्यूनतम फ़ॉन्ट आकार सेटिंग्स के साथ परीक्षण करें। अनुवाद मत भूलना: कुछ भाषाएँ अधिक कमरे की जरूरत है एक ही शब्द के लिए।
  • एचटीएमएल समर्थन के साथ ब्राउज़र के लिए placeholder लेकिन इसके लिए सीएसएस समर्थन के बिना (ओपेरा की तरह) भी परीक्षण किया जाना चाहिए।
  • कुछ ब्राउज़र कुछ के लिए अतिरिक्त डिफ़ॉल्ट सीएसएस का उपयोग करते हैं input प्रकार (email, search)। ये अप्रत्याशित तरीकों से प्रतिपादन को प्रभावित कर सकते हैं। उपयोग गुण  -webkit-appearance तथा -moz-appearance इसे बदलने के लिए। उदाहरण:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4531
2018-06-06 08:47



ध्यान दें कि यद्यपि वेबकिट इसे मजबूत विशिष्टता मानता है, हालांकि मोज़िला नहीं करता है। चीजों को दिखाने के लिए आपको वहां कुछ आयातकों को पॉप अप करने की संभावना है। - dmnc
@toscho: महान जवाब के लिए धन्यवाद। मुझे बस "लाइव" का थोड़ा प्रदर्शन करने की आवश्यकता थी, इसलिए आपका उदाहरण यहां भी पहुंचा जा सकता है: jsfiddle.net/Sk8erPeter/KyVXK। एक बार फिर धन्यवाद। - Sk8erPeter
फ़ायरफ़ॉक्स का प्लेसहोल्डर कम अस्पष्टता के साथ डिफ़ॉल्ट रूप से प्रतीत होता है। किसी और के लिए कड़ी मेहनत और सोच रहा है कि यह बिल्ली क्यों काम नहीं कर रहा है ("मेरा सफेद पाठ अभी भी ग्रे क्यों है .."), अस्पष्टता का उपयोग करें: 1 - jwinn
आईई 10 में *:-ms-input-placeholder तथा :-ms-input-placeholder अपने आप से काम नहीं करता है, लेकिन INPUT:-ms-input-placeholder कर देता है। अजीब। - Jared
बूटस्ट्रैप 3 के लिए नोट: "फॉर्म-कंट्रोल" वर्ग सीएसएस विशिष्टता (यानी "फॉर्म-कंट्रोल :: - वेबकिट-इनपुट-प्लेसहोल्डर") के कारण रंग को ओवरराइड करता है, इसलिए आपको कम से कम विशिष्ट या "! महत्वपूर्ण" आपके सीएसएस में (यह ड्रग करने के लिए नरक था क्योंकि न तो फायरबग और न ही देवतोल्स इस छद्म वर्ग को दिखाना प्रतीत होता है) - Costa


/* 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 प्लेसहोल्डर।

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


656
2018-02-09 16:44



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


आप textareas शैली भी बनाना चाह सकते हैं:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

260
2017-09-14 12:52



क्रोम में प्रिंटिंग पर काम नहीं करता है ... किसी भी मदद @media प्रिंट {इनपुट [प्रकार = पाठ] .form-control :: - वेबकिट-इनपुट-प्लेसहोल्डर, इनपुट [प्रकार = textarea] .form-control :: - वेबकिट -इनिप-प्लेसहोल्डर {रंग: # एफएफएफएफएफएफ; }} - Mahdi Alkhatib


के लिये बूटस्ट्रैप तथा कम उपयोगकर्ता, एक मिश्रण है। प्लेसहोल्डर:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

96
2018-02-14 21:11



या यहां तक ​​कि सरल, चर संपादित करें @input-color-placeholder आमतौर पर पाया जाता है variables.less - William
@ विलियम चयनकर्ता को स्वयं परिभाषित करना आसान नहीं होगा और मिश्रण को वापस जाने से बचने के लिए और यदि आप किसी अन्य इनपुट के प्लेसहोल्डर को एक अलग रंग बनाने की तलाश में हैं तो इसे बदलने में आसान नहीं होगा? - Brandito
@ ब्रांडिटो - यह एक एज केस की तरह लगता है - आमतौर पर प्लेसहोल्डर रंग एक डिज़ाइन के भीतर सभी रूप तत्वों के लिए समान होता है। - William
@ विलियम क्षमा करें मैं इस तरह की चीजें कहने में भयानक हूं, मैंने सोचा था कि आपके इच्छित इनपुट रंग के तर्क के साथ मिश्रण का उपयोग करना बेहतर होगा हालांकि काफी ईमानदारी से, मैं शायद किनारे के मामलों के बारे में सोच रहा हूं। मीटर (खोज इनपुट प्लेसहोल्डर को स्टाइल करना जहां यह रंगीन पृष्ठभूमि पर है: पी) बहुत खेद है लेकिन आप सही हैं, क्षमा चाहते हैं। - Brandito
@ ब्रैंडिटो यह सब अच्छा है। हमेशा किनारे के मामले हैं। - William


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

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

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


92
2018-04-14 02:28





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

// 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);
}

68
2018-06-25 09:01



अधिक लचीला तरीका - उपयोग करने के लिए @content; - milkovsky


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

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" />


51
2017-10-08 19:21



मुझे फ़ायरफ़ॉक्स v56 में भी जोड़ना था! - Savage