क्यों <textarea> और <textfield> शरीर से फ़ॉन्ट-परिवार और फ़ॉन्ट-आकार नहीं ले रहा है?

118

क्यों Textareaऔर textfieldनहीं ले रही है font-familyऔर font-sizeशरीर से?

यहां देखें लाइव उदाहरण http://jsbin.com/ucano4

कोड

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>texearea font</title>
        <style type="text/css">
        body {
            font-family: Verdana, Geneva, sans-serif;
            font-size:16px
        }
        </style>
        </head>            
        <body>
        <form action="" method="get">
        <textarea name="" cols="20" rows="4"></textarea>
        <input name="" type="text" />
        </form>
        <p>some text here</p>
        </body>
        </html>

यदि यह एक सामान्य व्यवहार है तो क्या मुझे इस तरह से सीएसएस में लिखना चाहिए। मैं सभी में एक ही शैली की जरूरत है

body,textarea,input  {
                font-family: Verdana, Geneva, sans-serif;
                font-size:16px
            }

और XHTML में कितने अन्य तत्व हैं जो फॉन्ट स्टाइलिंग से नहीं लेंगे body {....}?

css xhtml

— जितेन्द्र व्यास
स्रोत

76

डिफ़ॉल्ट रूप से, ब्राउज़र OS नियंत्रण या ब्राउज़र नियंत्रणों का उपयोग करते हुए अधिकांश फॉर्म एलिमेंट्स (टेक्सारैस, टेक्स्ट बॉक्स, बटन आदि) प्रस्तुत करते हैं। इसलिए अधिकांश फ़ॉन्ट गुण ओएस के वर्तमान में उपयोग किए जा रहे थीम से लिए गए हैं।

यदि आप अपने फ़ॉन्ट / पाठ शैली को बदलना चाहते हैं, तो आपको फ़ॉर्म तत्वों को स्वयं लक्षित करना होगा - हालांकि, जैसा आपने अभी-अभी किया है, उन्हें चुनना आसान होना चाहिए।

जहाँ तक मुझे पता है, केवल रूप तत्व प्रभावित होते हैं। मेरे सिर के ऊपर बंद: input, button, textarea, select।

— बोल्टकॉक
स्रोत

32

सबसे सीधा उपाय यदि यह व्यवहार अवांछित है तो अपनी शैलियों में जोड़ें textarea, input, button, select { font-family: inherit; font-size: inherit; }।

— देवविन

@ डेविन, आपको जोड़ना चाहिए text-align: inheritक्योंकि बटन के ग्रंथ अक्सर केंद्र में संरेखित होते हैं।

— यहोशू मुहिम

मैं इसके विपरीत कैसे करूँ, उर्फ, मेरे पूरे वेबपेज / बॉडी के लिए उस OS फ़ॉन्ट का उपयोग करें?

— 16

@agirault आप कुछ इस तरह से कर सकते हैं: शरीर {font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell," Fira Sans "," Droid सैंस "," हेल्वेटिका नीयू "," हेल्वेटिका "," एरियल ", सैंस-सेरिफ़; }

— गेटअप 8

149

कुछ नियंत्रणों को फ़ॉन्ट सेटिंग्स विरासत में प्राप्त करने के लिए डिफ़ॉल्ट नहीं हैं। आप इसे अपने CSS में जगह देकर इसे ओवरराइड कर सकते हैं:

textarea {
   font-family: inherit;
   font-size: inherit;
}

— spoulson
स्रोत

4

संस्करण 8 से पहले IE वारिस का समर्थन नहीं करता है, इसलिए यह काम नहीं करेगा।

— असंतुष्टगीत

6

मुझे लगता है कि यह हर तत्व को परिभाषित करने के लिए केवल क्रॉस ब्राउज़र समाधान हैbody, input, select, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#FFFFFF; }

— जितेंद्र व्यास

1

मैं सहमत हूं, यह दृष्टिकोण अधिक व्यावहारिक है। मैं सिर्फ उस व्यवहार को प्रदर्शित करना चाहता था जो आप inheritदृष्टिकोण का उपयोग करके देख रहे थे ।

— स्पूल्सन

Unfortunatelly क्रोम (संस्करण 59.0.3071.115) फ़ॉन्ट-आकार लागू नहीं कर रहा है: विरासत; फ़ॉन्ट-परिवार निर्दिष्ट किए बिना।

— ओंद्रेज

font-weight: inherit;लापता है।

— छत

10

सभी ब्राउज़रों में अंतर्निहित शैलीगत शैलियाँ हैं। इसीलिए, जब आप कोई पेज बिना किसी शैली के परिभाषित करते हैं, तो <h1>टैग बड़े और बोल्ड होते हैं, और <strong>टेक्स्ट को बोल्ड बनाते हैं। इसी तरह, डिफ़ॉल्ट शैलियों के लिए <input>और <textarea>तत्वों के लिए फ़ॉन्ट शैलियों को परिभाषित किया गया है।

फ़ायरफ़ॉक्स में इस स्टाइलशीट को देखने के लिए, इसे अपने एड्रेस बार में डालें: resource://gre/res/forms.css

वैसे भी, आपको इन शैलियों को ओवरराइड करना होगा क्योंकि आप किसी भी अन्य शैलियों को पसंद करेंगे जैसे आपने उस अंतिम उदाहरण में किया था।

यदि आप सोच रहे हैं कि अन्य शैलियों को किस प्रकार परिभाषित किया गया है, तो अपने संसाधनों में CSS फाइलों को देखें। आप उन्हें उपरोक्त यूआरएल के माध्यम से, या resफ़ायरफ़ॉक्स निर्देशिका में अपने फ़ोल्डर में देख कर एक्सेस कर सकते हैं (जैसे:) c:\program files\mozilla firefox\res। ये वे हैं जो सामान्य पृष्ठों की शैलियों को प्रभावित कर सकते हैं:

html.css
forms.css
quirk.css
ua.css

— nickf
स्रोत

लेकिन <h1> से फ़ॉन्ट स्टाइल ले रहा है <body>लेकिन <textarea>नहीं

— जितेंद्र व्यास

3

h1किसी फ़ॉन्ट को परिभाषित करने के लिए शैलियाँ नहीं हैं, इसलिए आपकी bodyशैली पूर्वता लेती है। के लिए शैलियों inputएक शैली को परिभाषित करती है, और यह आपके चयनकर्ता की तुलना में अधिक विशिष्ट है, इसलिए यह जीतता है।

— nickf

आपकी टिप्पणी के लिए +1। मैं जागरूक नहीं था। आपका मतलब है कि कुछ तत्वों में ब्राउज़र में डिफ़ॉल्ट शैली है और शरीर द्वारा ओवरराइड नहीं किया जा सकता है {....}

— जितेंद्र व्यास

1

मुझे लगता है कि उसका क्या मतलब है कुछ तत्व DOM में दूसरों की तुलना में अधिक विशिष्ट हैं, या जिनका दायरा छोटा है। चूँकि एक textarea शरीर के अंदर मौजूद है, textarea के लिए परिभाषित कोई भी शैली शरीर {} शैलियों को अधिलेखित कर देगी। इसलिए एफएफ की डिफ़ॉल्ट बनावट शैली आपके शरीर की शैली को अधिलेखित करती है, भले ही आपका बाद में परिभाषित किया गया हो (आमतौर पर कुछ और हाल ही में पूर्ववर्तीता ले जाएगा, लेकिन यह व्यापक दायरे / कम विशिष्ट में नहीं है)।

— user1072406
स्रोत

0

मैंने सामान्य पाठ की तुलना में बहुत बड़े फ़ॉन्ट का उपयोग करके मोबाइल में टेक्स्टारिया को रोकने के लिए सभी प्रकार के प्रयास किए। ऐसा लगता है कि जब मेरा टेक्स्टारिया cols = "45" था, तो फॉन्ट सामान्य था लेकिन जैसे ही इसे बढ़ाकर cols = "71" कर दिया गया, भले ही यह td टैग के अंदर रहा लेकिन फ़ॉन्ट बड़ा हो गया।

मोज़िला पृष्ठ ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) पर मुझे यह मिला

textarea {
   text-size-adjust: none;
}

यह मेरे लिए सबसे अच्छा जवाब लगता है। यह पीसी, टैबलेट और, सबसे महत्वपूर्ण बात, मेरे एंड्रॉइड फोन पर काम करता है।

— ब्रायन जोन्स
स्रोत