डेवलपर टूल के साथ वेबकिट-इनपुट-प्लेसहोल्डर का निरीक्षण करें


225

निम्नलिखित के साथ पाठ इनपुट के प्लेसहोल्डर को स्टाइल करना संभव है:

-webkit-input-placeholder {
    color: red;
}

मैं ऑनलाइन एक वेबसाइट देख रहा हूं और मैं उसी प्लेसहोल्डर रंग का उपयोग करना चाहूंगा जैसा वे करते हैं। क्या यह पता लगाना संभव है कि उन्होंने किस रंग का इस्तेमाल किया? मैं किसी भी अल्फा वैल्यू को शामिल करना चाहूंगा, इसलिए मैं सिर्फ एक छवि संपादक के साथ रंग का नमूना नहीं ले सकता।

जब मैं Chrome देव टूल के साथ तत्व का निरीक्षण करता हूं, तो मैं देखता हूं:

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

देव उपकरण इनपुट तत्व का निरीक्षण करते समय प्लेसहोल्डर तत्व के बारे में जानकारी प्रदान नहीं करते हैं। क्या कोई और तरीका है?



16
नहीं ... मैं स्पष्ट रूप से इस सवाल में बताता हूं कि मैं इसे बदलने के बारे में जानता हूं, लेकिन यह सोच रहा हूं कि किसी अन्य व्यक्ति के गुणों का निरीक्षण कैसे किया जाए। मैं एक कोड नमूना भी प्रदान करता हूं, जिसमें मुझे पता है कि इसे कैसे बदलना है।
सीन एंडरसन

वेबसाइट क्या है? चूंकि प्लेसहोल्डर एक छद्म तत्व है, इसलिए आपको उस तत्व का निरीक्षण करते समय शैलियों को देखने में सक्षम होना चाहिए।
cport1

जवाबों:


457

मैं यह समझ गया।

क्रोम डेवलपर टूल के सेटिंग पैनल में 'यूजर एजेंट शैडो DOM दिखाएँ' को सक्षम करने के लिए ट्रिक है:

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

सेटिंग्स में जाने के लिए, अपने देव उपकरण पैनल के शीर्ष दाईं ओर "click" बटन पर क्लिक करें, फिर सेटिंग्स पर क्लिक करें, और यह डिफ़ॉल्ट प्राथमिकताएँ टैब के नीचे है।

इसके साथ, अब आप इसे देख सकते हैं:

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


5
सेटिंग 62 में है और यह खूबसूरती से काम करता है।
इशरवुड

Chrome 67 और आपका समाधान समान रूप से लागू होता है
gefrag

@gefrag मैं Chrome 67 का भी उपयोग करता हूं, लेकिन यह विकल्प नहीं खोज सकता। क्या आप कृपया टैब में देख सकते हैं जो अभी स्थित है?
बेन कार्प

किसी को पता है कि उस ::placeholderछद्म तत्व को कैसे देखा जाए जो अब मोटे तौर पर समर्थित है?
स्वैबेल

2
इस उत्तर में उल्लिखित वर्कफ़्लो @swrobel आपको निरीक्षण करने देता है ::placeholder। इससे संबंधित जवाब देखें ।
कायस बैस

31
  1. Google Chrome संस्करण 69 के लिए:
  2. खुले निरीक्षण तत्व: विंडोज / लिनक्स Ctrl + Shift + C या F12 पर मैक + + Shift + C पर।
  3. शीर्ष दाईं ओर "to" बटन पर क्लिक करें फिर सेटिंग्स पर जाएं
  4. सेटिंग्स में, प्राथमिकताएं> शो यूजर एजेंट शैडो डोम पर क्लिक करें

नीचे दी गई छवियां प्रक्रिया दिखाती हैं:

सेटिंग्स पर जाएं> प्राथमिकताएं:
सेटिंग्स> प्राथमिकताएं पर जाएं

दिखाएँ उपयोगकर्ता एजेंट छाया डोम पर क्लिक करें:
यहां छवि विवरण दर्ज करें

प्लेसहोल्डर का सीएसएस देखें:
यहां छवि विवरण दर्ज करें

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