एचटीएमएल 5, प्लेसहोल्डर, वेबकिट

Question

में line-height मैं एक इनपुट फ़ील्ड है:

<input type="text" placeholder="whatever"> 

शैलियों के साथ

:

input { 
    margin: 0; 
    padding: 0 6px; 
    font-size: 19px; 
    line-height: 19px; 
    height: 36px; 
    width: 255px; 
} 

समस्या line-height वेबकिट में प्लेसहोल्डर के लिए प्रभाव नहीं ले रही है है CHROME। तो इनपुट क्षेत्र में पाठ एक बदसूरत तरीके से गठबंधन किया गया है। किसी और ने इसे देखा और अब इसे कैसे ठीक किया जाए?

धन्यवाद

Answer 1

अपने टैग में

देखते हुए, मैं यह सोचते हैं रहा हूँ तुम कुछ की तरह लिख रहे हैं ...

<input type="text" placeholder="whatever"> 

दुर्भाग्य से, क्रोम अपने हाथ बांध जब यह प्लेसहोल्डर स्टाइल की बात आती है, चयनकर्ता इस तरह दिखता है ...

input::-webkit-input-placeholder {} 

आप स्टाइल विकल्प, gotchas और Styling the HTML Placeholder

Answer 2

मुझे नहीं लगता कि मैं पूरी तरह से अपने समस्या को दोहराने कर सकते हैं, लेकिन शायद आप padding: 7px 6px; का उपयोग कर इसे ठीक कर सकते हैं। ऐसा करने से उम्मीद है कि अपने शीर्ष और निचले पैडिंग को 7px पर सेट करें जो line-height जैसा ही काम करता है। विभिन्न आकारों (चौड़ाई/फ़ॉन्ट आकार) के साथ आप (height - fontsize)/2 की गणना करके उपयुक्त पैडिंग चुनने में सक्षम होना चाहिए, शायद पूर्णता के लिए पिक्सेल या दो दें या दो।

Answer 3

में समर्थित ब्राउज़रों पा सकते हैं ऐसा लगता है कि आपके line-height घोषणा पूरी तरह से हटाने के wor ks। यह मेरे लिए एफएफ 7, क्रोम 15 और सफारी 5.1 में काम करता है। आईई 9 और एफएफ 3.6 में भी अच्छा लगा लेकिन आईई 8 में अच्छा नहीं दिख रहा है।

Answer 4

इनपुट प्लेसहोल्डर पिक्सेल line-height मूल्यों की तरह प्रतीत नहीं है, लेकिन यह खड़ी इनपुट में यह केंद्रित हो जाएगा:

::-webkit-input-placeholder { line-height: normal; }