फ़ायरफ़ॉक्स इनपुट प्लेसहोल्डर पैडिंग समस्या

Question

क्यों फ़ायरफ़ॉक्स प्लेसहोल्डर टेक्स्ट के लिए पैडिंग नहीं ले रहा है। यहाँ http://jsfiddle.net/JfrfZ/

उदाहरण इसे कैसे ठीक करें देखते हैं?

एचटीएमएल

<form method="get" action="/search" id="search"> 
    <input name="q" type="text" size="40" placeholder="Search..." /> 
</form> 

सीएसएस

#search input[type="text"] { 
      background: url(../img/search-icon.png) no-repeat 2.6% 50% #fcfcfc; 
       background-size: 6%; 
       border: 1px solid #d1d1d1; 
       font: normal 1.7em Arial,Helvetica,Sans-serif; 
       color: #bebebe; 
       width: 33%; 
       padding: 0.6% 2%; 
       border-radius: 3em; 
       text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
       padding-left: 3.8%; 
       outline: 0; } 

Answer 1

आप उपयोग कर सकते text-indent

#search input[type="text"] { 
 
    background: url(../img/search-icon.png) no-repeat 2.6% 50% #fcfcfc; 
 
    background-size: 6%; 
 
    border: 1px solid #d1d1d1; 
 
    font: normal 1.7em Arial,Helvetica,Sans-serif; 
 
    color: #bebebe; 
 
    width: 33%; 
 
    padding: 0.6% 2%; 
 
    border-radius: 3em; 
 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset; 
 
    padding-left: 3.8%; 
 
    outline: 0; 
 
    text-indent: 3.8% 
 
}

<form method="get" action="/search" id="search"> 
 
    <input name="q" type="text" size="40" placeholder="Search..." /> 
 
</form>

Answer 2

आपको the ::-moz-placeholder psuedo-element (पूर्व में :moz-placeholder) का उपयोग करने की आवश्यकता होगी।

#search input::-moz-placeholder { 
    padding: <top> <right> <bottom> <left>; 
} 

---

वहाँ a bug in Firefox that prevented padding from working on text inputs हुआ करता था। तो text-indent यदि आप प्रतिशत का उपयोग करने की आवश्यकता है तो जाने का तरीका था।

#search input:-moz-placeholder { 
    text-indent: 3.8%;  
} 

लेकिन बग 2012-08-28 पर तय और Firefox 17 में शामिल वहाँ नहीं रह गया है text-indent उपयोग करने के लिए एक की जरूरत है था।

Answer 3

कोशिश बदलने के लिए padding-left रहे हैं:

text-indent:3.8%; 

Answer 4

तुम बस आप गद्दी के रूप में प्रतिशत के उपयोग से कर रहे हैं के बाद से input { }