एचटीएमएल 5 प्लेसहोल्डर सीएसएस पैडिंग

Question

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

वैसे भी, यहाँ सीएसएस के लिए कोड है। ( EDIT : यह sass से उत्पन्न सीएसएस है)

#search {
  margin-top: 1px;
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

#search form {
  position: relative;
}

#search input {
  padding: 0 10px 0 29px;
  color: #555555;
  border: none;
  background: url('/images/bg_searchbar.png?1296191141') no-repeat;
  width: 180px;
  height: 29px;
  overflow: hidden;
}

#search input:hover {
  color: #00ccff;
  background-position: 0px -32px;
}

और यहाँ सरल HTML है:

<div id="search">
  <form>
    <input type="text" value="" placeholder="Search..." name="q" autocomplete="off" class="">
  </form>
  <div id="jquery-live-search" style="display: block; position: absolute; top: 15px; width: 219px;">
    <ul id="search-results" class="dropdown">
    </ul>
  </div>
</div>

बहुत साधारण? प्लेसहोल्डर किसी कारण से बंद है, लेकिन जब आप इनपुट फ़ील्ड में टाइप करने का प्रयास करते हैं, तो पाठ संरेखित होता है। ऐसा लगता है कि आप केवल webkitप्लेसहोल्डर के रंग (के लिए ) को बदल सकते हैं , लेकिन अगर मैं युक्त इनपुट के पैडिंग को संपादित करने की कोशिश करता हूं, तो यह इनपुट के डिजाइन को मिटा देता है! बाल खींचता है

यहाँ प्लेसहोल्डर की स्क्रीनिंग और पाठ इनपुट के साथ इनपुट फ़ील्ड हैं:

संपादित करें :

अभी के लिए मैंने इस jquery प्लगइन का सहारा लिया है ।

यह बॉक्स के ठीक बाहर काम करता है और यह मेरे क्रोम की समस्या को ठीक करता है। मैं अभी भी यह उजागर करना चाहूंगा कि समस्या क्या है (यदि इसका मेरे क्रोम या कुछ के साथ कुछ करना है)

मुझे पूरा यकीन है कि यह शैलियों नहीं है क्योंकि जॉन कैटरफेल्ड ने इसे बिना किसी समस्या के पुन: पेश किया, इसलिए मैं उम्मीद कर रहा हूं कि कोई व्यक्ति अभी भी मुझे सही दिशा में ले जा सकता है क्योंकि यह मेरे साथ (मेरे क्लाइंट के क्रोम के साथ भी हो रहा है)। यह शायद Chrome / OSX के लिए मूल है यदि जॉन विंडोज़ का उपयोग कर रहा है)

Comments

क्या आप उत्पन्न सीएसएस प्रदान कर सकते हैं? यह SASS स्रोत की तुलना में काम करना बहुत आसान होगा।

— RoToRa

+1 यह प्लगइन भयानक है - सरल है और मेरे पास आवश्यक विकल्प हैं। शायद सबसे अच्छा प्लेसहोल्डर समाधान मैं अब तक ठोकर।

— १६:११

अगर किसी को बूटस्ट्रैप के साथ कोई समस्या है, तो ये दो विकल्प मदद करते हैं: फ़ॉन्ट-आकार: बड़ा; px के बजाय; और लाइन-ऊंचाई: सामान्य;

— नेकर

Answer 1

मुझे वही मुद्दा मिला।

मैंने अपने इनपुट से लाइन-ऊंचाई हटाकर इसे ठीक किया। जाँच करें कि क्या कुछ लाइनहाइट है जो समस्या पैदा कर रहा है

Comments

गलत। इनपुट तत्व के साथ प्लेसहोल्डर लाइन-ऊंचाई से प्रभावित नहीं होता है, लेकिन पैडिंग सबसे अच्छा समाधान नहीं है। सबसे अच्छा उपयोग करना है (और मुझे पता है कि यह आम तौर पर कभी भी कुछ नहीं करता है, लेकिन इस मामले में) यह वैक्टर-एलिगेंट CSS संपत्ति है।

— RIK

हां, आश्चर्य की बात है, कि इस मुद्दे को डीआईडी ​​ने ठीक किया। और टाइप किए गए पाठ अभी भी लाइन-ऊंचाई की मदद के बिना लंबवत केंद्रित हैं।

— hndcrftd

जब सीधे इनपुट पर लाइन-ऊँचाई नहीं थी, तो line-height: normal;मेरे लिए चाल चल रही थी

— फिल्पेरो

वैसे भी आपको ब्राउज़रों के लिए लाइन-

— हाइट

Answer 2

मेरे पास समान मुद्दा था, मेरी समस्या साइड पैडिंग के साथ थी, और समाधान के साथ था, पाठ-इंडेंट, मुझे यह एहसास नहीं था कि टेक्स्ट इंडेंट प्लेसहोल्डर साइड स्थिति को प्रभावित करता है।

input{
  text-indent: 10px;
}

Answer 3

यदि आप अपनी लाइन-ऊँचाई रखना चाहते हैं और प्लेसहोल्डर को उसी के लिए बाध्य करना चाहते हैं, तो आप नए ब्राउज़र संस्करणों के बाद सीधे प्लेसहोल्डर CSS को संपादित कर सकते हैं। यह मेरे लिए चाल है:

input::-webkit-input-placeholder { /* WebKit browsers */
  line-height: 1.5em;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  line-height: 1.5em;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  line-height: 1.5em;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
  line-height: 1.5em;
}

Answer 4

line-height: normal; 

मेरे लिए काम किया;)

Comments

सफारी में काम करता है।

— मोंटेइरोब्रेन

सफारी में काम किया

— ज़म 85

Answer 5

वास्तव में लाइन-ऊँचाई को हटाने से आपका टेक्स्ट आपके प्लेसहोल्डर-टेक्स्ट के साथ संरेखित हो जाता है, लेकिन यह आपकी समस्या को ठीक से हल नहीं करता है क्योंकि आपको अपने डिज़ाइन को इस दोष के लिए अनुकूलित करने की आवश्यकता है (यह बग नहीं है)। वर्टिकल-अलाइन को जोड़ना डील भी नहीं करेगा मैंने सभी ब्राउज़रों में कोशिश नहीं की है, लेकिन यह सफारी 5.1.4 में काम नहीं करता है।

मैंने इसके लिए एक jQuery फिक्स के बारे में सुना है, जो क्रॉस-ब्राउज़र प्लेसहोल्डर सपोर्ट (jQuery.placeholder) नहीं है, बल्कि प्लेसहोल्डर्स को स्टाइल करने के लिए है, लेकिन मैंने इसे अभी तक नहीं पाया है।

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

संपादित करें: प्लगइन मिला! jquery.placeholder.min.js आपको पूर्ण स्टाइल क्षमताओं और सौदेबाज़ी में क्रॉस-ब्राउज़र समर्थन दोनों प्रदान करता है।

Comments

एक गैर प्लेसहोल्डर फिक्स को खोजने की कोशिश कर रहा था, जैसा कि मैंने पहले ही ऊपर jquery प्लगइन का उपयोग किया था :) मदद के लिए धन्यवाद!

— जीर्णशीर्ण

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

— ज्येकाडेलिक

Answer 6

मुझे एक समस्या थी, जो सिर्फ इंटरनेट एक्सप्लोरर में दिखाई देती है। इनपुट फ़ील्ड को स्टाइल किया गया था

height:38px;
line-height:38px;

आईई में दुर्भाग्य से प्रारंभिक प्लेसहोल्डर सही स्थिति में नहीं दिखाई देता है। लेकिन जब मैंने मैदान में क्लिक किया और फिर इस क्षेत्र को छोड़ दिया, तो प्लेसहोल्डर सही स्थिति में दिखाई दिया।

मेरा समाधान सेट करना था:

line-height:normal;

Answer 7

line-height: 0px;Chrome में मेरे लिए इसे निर्धारित करना

Comments

क्या आप बता सकते हैं कि यह चार साल पहले से स्वीकृत उत्तर में क्या जोड़ता है?

— नाथन तुग्गी

@NathanTuggy ने मुझे स्वीकार किए गए उत्तर का सुझाव दिया कि आप line-heightतत्व से पूरी तरह से विशेषता को हटा दें । मेरे लिए जो कुछ नहीं किया, और मेरे लिए जो समस्या तय की वह थीline-height: 0px

— जॉबजॉब

यहाँ भी, यह वही है जो वास्तव में मेरे लिए मुद्दा तय कर रहा है।

— एरोसॉन

Answer 8

मैंने एक पृष्ठभूमि छवि के रूप में आपके स्क्रीनशॉट का उपयोग करके एक फिडेल बनाया है और अतिरिक्त मार्क-अप को अलग कर रहा हूं, और यह ठीक काम करने लगता है

http://jsfiddle.net/fLdQG/2/ (वेबकिट ब्राउज़र आवश्यक)

क्या यह आपके लिए कार्य करता है? यदि नहीं, तो क्या आप अपने सटीक मार्क-अप और सीएसएस के साथ फिडेल को अपडेट कर सकते हैं?

Comments

हम्म मैं लिंक की जाँच की और यह मेरे लिए भी काम नहीं करता है। क्या आपको लगता है कि मेरे क्रोम में एक प्लगइन / कुछ है जो इसे पैदा कर रहा है? स्क्रीनशॉट: grab.by/8OFf

— जीर्णशीर्ण

यह सफारी का उपयोग कर जाँच की और यह काम करता है। क्रोम और सफारी को एक ही चीज नहीं देनी चाहिए?

— जीर्णशीर्ण

हम्म, मुझे ऐसे प्लगइन के बारे में पता नहीं है जो आपके लेआउट को इस तरह प्रभावित करेगा, लेकिन क्रोम और सफारी दोनों मेरे लिए ठीक काम करते हैं (और हाँ, उन्हें एक ही चीज़ सौंपनी चाहिए)।

— 14

मैक पर 9.0.597.84 (क्रोम) का उपयोग कर। जो आप उपयोग कर रहे हैं?

— जीर्णशीर्ण

मैं विंडोज 7. 7 पर क्रोम 8.0.552.237 का उपयोग कर रहा हूं

— ajcw

Answer 9

मैंने उस क्षण पर ध्यान दिया, जब मैंने ओएस एक्स पर क्रोम को नवीनतम स्थिर रिलीज (9.0.597.94) पर अपडेट किया था, इसलिए यह क्रोम बग है और उम्मीद है कि तय हो जाएगा।

मैं भी इस के आसपास काम करने का प्रयास करने के लिए परीक्षा नहीं कर रहा हूँ और बस तय करने के लिए इंतजार कर रहा हूँ। इसका मतलब सिर्फ और सिर्फ काम करना होगा।

Comments

mmm तो यह पुष्टि की है? क्या यह जाँचने के लिए हमारे क्रोम को "डाउनग्रेड" करने का कोई तरीका है कि क्या यह वास्तव में क्रोम है?

— जीर्णशीर्ण

यह 2013 है और मेरे पास अभी भी क्रोम के नवीनतम संस्करण पर यह मुद्दा है: संस्करण 27.0.1453.116 मीटर

— पोस्टस्क्रिप्ट 5

Answer 10

प्लेसहोल्डर इससे प्रभावित नहीं है line-heightऔर paddingब्राउज़र पर असंगत है।

मैं हालांकि एक और समाधान मिल गया है।

VERTICAL-ALIGN। यह संभवतः केवल एक ही बार काम करता है, लेकिन कोशिश करें कि इसके बजाय और सीएसएस कोड की कई पंक्तियों को गुफा दें।

Comments

मेरे लिए कुछ नहीं करता है।

— पोस्टस्क्रिप्ट

Answer 11

लाइन-ऊंचाई निकालें या पेडिंग का उपयोग करके सेट करें ... यह सभी ब्राउज़र में काम कर रहा है

Answer 12

मुझे उत्तर मिला कि जॉन कैटरफेल्ड के ब्लॉग पर इस बारे में मेरी कुंठाओं को दूर किया गया ।

... क्रोम (v20-30) लगभग सभी शैलियों को लागू करता है लेकिन एक प्रमुख चेतावनी के साथ - प्लेसहोल्डर शैलियों में इनपुट बॉक्स का कोई आकार नहीं होता है, इसलिए लाइन-ऊंचाई और पैडिंग टॉप या बॉटम जैसी चीजों से दूर रहें।

यदि आप लाइन-ऊँचाई या पैडिंग का उपयोग कर रहे हैं तो आप परिणामी प्लेसहोल्डर से निराश होने वाले हैं। मुझे इस बिंदु तक कोई रास्ता नहीं मिला है।

Answer 13

यदि आप प्लेसहोल्डर टेक्स्ट को दाईं ओर ले जाना चाहते हैं और कर्सर को रिक्त स्थान पर छोड़ दें, तो आपको प्लेसहोल्डर की शुरुआत में स्पेस (एस) जोड़ना होगा:

<input type="email" placeholder="  Your email" />

Answer 14

मैंने अपने कोणीय ऐप के लिए इस पृष्ठ में दिए गए लगभग सभी तरीकों का परीक्षण किया है। केवल मुझे  उस आवेषण रिक्त स्थान के माध्यम से हल मिला

कोणीय सामग्री

<input matInput type="text" class="pl-2" placeholder="&nbsp;&nbsp;Email">

गैर कोणीय सामग्री

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container m-3 d-flex flex-column align-items-center justify-content-around" style="height:100px;">
<input type="text" class="pl-0" placeholder="Email with no Padding" style="width:240px;">
<input type="text" class="pl-3" placeholder="Email with 1 rem padding" style="width:240px;">
</div>