मैं प्रत्येक टेक्स्ट फ़ील्ड के लिए प्लेसहोल्डर टेक्स्ट को अलग-अलग रंग में स्टाइल करना चाहूंगा।
नीचे मोज़िला डॉक से कोड पूरे इनपुट टैग को प्रभावित करेगा।
https://developer.mozilla.org/en/CSS/%3a-moz-placeholder
<style type="text/css">
input:-moz-placeholder {
color: green;
}
</style>
मैं प्रत्येक पाठ क्षेत्र के लिए अलग-अलग रंग रखना चाहता हूं।
एचटीएमएल
<input id="foo" type="text" placeholder="im green" />
<input id="foo2" type="text" placeholder="im red />
jQuery
मैंने नीचे कोशिश की, लेकिन यह सिर्फ इनपुट टेक्स्ट फील्ड में ही प्लेसहोल्डर को नहीं, बल्कि कलर को सेट करेगा।
var elementId = "#foo2";
$(elementId + ":-moz-placeholder").css("color", "red");
मुझे लगता है कि मेरा चयनकर्ता सही तरीके से निर्दिष्ट नहीं है, हालांकि यह सुनिश्चित नहीं है कि ठीक से कैसे सेट किया जाए।
मैं jQuery का उपयोग करके तत्व आईडी द्वारा अलग-अलग प्लेसहोल्डर कैसे शैली कर सकता हूं?
उत्तर:
जवाब के लिए 3 № 1क्या आपने कोशिश की ... किसी भी संयोग से सीएसएस कक्षाएं?
<input class="green" id="foo" type="text" placeholder="im green" />
<input class="red" id="foo2" type="text" placeholder="im red />
<style type="text/css">
input.green:-moz-placeholder {
color: green;
}
</style>
जवाब के लिए 2 № 2
: -मोज़-प्लेसहोल्डर एक छद्म वर्ग है।
छद्म कक्षाएं DOM का हिस्सा नहीं हैं, इसलिए jQuery सीधे उनके बारे में कुछ भी संपादित नहीं कर सकता है।
एक वैकल्पिक दृष्टिकोण रंगों को बदलने के लिए कक्षाओं का उपयोग करना होगा, जो कि वॉकर्नियो ने सुझाव दिया था।
उसका कोड लें, और फिर कक्षा को हरे से लाल में बदलने के लिए इसका उपयोग करें:
$("input#foo").toggleClass("red").toggleClass("green");
जवाब के लिए 0 № 3
यह jQuery के साथ एक ब्लॉक प्रस्तुत करना संभव है:
var $inlineStyleTemplate = $("" +
"<style id="custom-menu-color"> " +
".navigation-md-lg > li > a, .header-right > ul > li > a,.header-right .fa-search {color: " + menuColor + "}" +
"svg {fill: " + menuColor + "}" +
"#search-search {border-color: " + menuColor + "}" +
"#search-search::-webkit-input-placeholder { color: " + menuColor + "}" +
"#search-search::-moz-placeholder { color: " + menuColor + "}" +
"#search-search:-ms-input-placeholder { color: " + menuColor + "}" +
"#search-search:-moz-placeholder { color: " + menuColor + "}" +
"</style>"
);
$("head").prepend($inlineStyleTemplate);