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



css html5 placeholder html-input (25)

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

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

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

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

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


Answers

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

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

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

*::-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;
}

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

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

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

.form-control{
    .placeholder(red);
}

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

::-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; 
}


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

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

क्रेडिट: डेविड वॉल्श


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

::-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!">

उम्मीद है कि यह मदद करेगा।


कार्यान्वयन

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

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

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

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

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

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

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

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

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

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

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

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

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

.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;
}

Bootstrap और Less उपयोगकर्ताओं के लिए, एक मिश्रण है। प्लेसहोल्डर:

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

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

-webkit-text-fill-color: red;

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


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

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

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

यह प्लेसहोल्डर समेत सबकुछ स्टाइल करेगा।

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

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


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

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

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


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

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

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

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


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

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


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

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

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

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+ */

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

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

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


यहां एक और उदाहरण दिया गया है:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>


कोशिश करें इससे आपकी मदद मिलेगी यह आपके सभी एफएवी ब्राउज़र में काम करेगी:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

तत्व अर्द्ध पारदर्शी की पृष्ठभूमि बनाने के लिए, लेकिन तत्व अपारदर्शी की सामग्री (टेक्स्ट और छवियां) रखें। आपको उस छवि के लिए सीएसएस कोड लिखना होगा और आपको न्यूनतम मूल्य के साथ अस्पष्टता नामक एक विशेषता जोड़नी होगी। जैसे

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

// कम मूल्य अधिक पारदर्शिता होगी, अयस्क मूल्य कम पारदर्शिता होगी।





html css html5 placeholder html-input