tutorial - css security



<Input> शरीर से फ़ॉन्ट का उत्तराधिकारी क्यों नहीं है? (3)

मेरे पास इनपुट और लेबल फ़ील्ड हैं:

<label class="adm" for="UserName">User name</label>
<input class="adm" id="UserName" name="UserName" size="30" type="text" value="" />

और सीएसएस:

body,html { font-family: Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; color: #111;}
label.adm  { font-size:0.9em; margin:0 0 3px 3px; display: block;}
input.adm  { font-size:0.9em; margin:0 0 3px 3px; }

जब फ़ायरफ़ॉक्स में कोड खुलता है तो फोंट समान नहीं होते हैं। फायरबग से पता चलता है कि दोनों को "उत्तराधिकारी" होना चाहिए और जब मैं गणना करता हूं तो यह दिखाता है कि लेबल वर्डाना का उपयोग करता है। हालांकि इनपुट दिखाता है कि यह "एमएस शैल डीएलजी" का उपयोग करता है। क्या कोई यह बता सकता है कि क्या हो रहा है और यह सामान्य सीएसएस नियमों का पालन क्यों नहीं करता है?

जमीमा

https://ffff65535.com


तीन साल बाद, मुझे यह अजीब लगता है <input> प्रकार reset , submit , और button क्रोम या सफारी में font-family उत्तराधिकारी नहीं है। मैंने पाया कि वे पैडिंग भी प्राप्त नहीं करेंगे।

लेकिन जब मैं background , border , या इस अजीब appearance संपत्ति की तरह कुछ गुणों के साथ गड़बड़ करता हूं, तो font-family और padding का असर पड़ता है, लेकिन बटन का मूल रूप और अनुभव खो जाता है, यदि आप पूरी तरह से आराम कर रहे हैं तो कोई समस्या नहीं है बटन

यदि आप विरासत वाले font-family साथ देशी दिखने वाले बटन चाहते हैं, तो <input> तत्व <input> बजाय तत्व का उपयोग <button>

Codepen देखें।


फॉर्म आइटम (इनपुट / टेक्स्टरेरा / आदि) फ़ॉन्ट जानकारी का वारिस नहीं करते हैं। आपको उन वस्तुओं पर फ़ॉन्ट-फ़ैमिली सेट करने की आवश्यकता होगी।


यह डिफ़ॉल्ट रूप से वारिस नहीं करता है लेकिन आप इसे सीएसएस के साथ प्राप्त करने के लिए सेट कर सकते हैं

input, select, textarea, button{font-family:inherit;}

डेमो: http://jsfiddle.net/gaby/pEedc/1/