<ইনপুট> <body> থেকে ফন্টটির উত্তরাধিকারী হয় না

103

আমার ইনপুট এবং লেবেল ক্ষেত্র রয়েছে:

<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; }

যখন ফায়ারফক্সে কোড খোলে ফন্টগুলি এক হয় না। ফায়ারবাগ দেখায় যে দু'জনেরই "উত্তরাধিকার সূত্রে" হওয়া উচিত এবং যখন আমি গণনার দিকে তাকাব তখন এটি দেখায় যে লেবেলটি ভার্দানা ব্যবহার করে। তবে ইনপুটটিতে দেখা যাচ্ছে এটি "এমএস শেল ডিএলজি" ব্যবহার করে।

কেউ কি ঘটছে তা ব্যাখ্যা করতে পারে এবং কেন এটি সাধারণ সিএসএসের নিয়ম মানছে বলে মনে হচ্ছে না?

css

— জুডি আর
সূত্র

তারা খুব খারাপ লাগছে না। আমার ধারণা, ডাব্লু 3 সি সিদ্ধান্ত নিয়েছে যে তাদের নিজের

— ব্রোসার

128

এটি ডিফল্টরূপে উত্তরাধিকারসূত্রে আসে না তবে আপনি এটি CSS এর সাথে উত্তরাধিকারে সেট করতে পারেন

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

ডেমো: http://jsfiddle.net/gaby/pEedc/1/

— গ্যাব্রিয়েল পেট্রিওলি
সূত্র

ফন্ট সম্পত্তি স্বয়ংক্রিয়ভাবে উত্তরাধিকার

— সূত্রের

4

@ ডিএকো, এটি ফর্ম উপাদানগুলির পাশাপাশি সমস্ত উপাদানগুলির জন্য সত্য, যা বর্তমান সিস্টেম স্টাইলিং থেকে উত্তরাধিকারী হয় তাই তারা এমন একটি অনুভূতি বজায় রাখে যা ব্যবহারকারীর সাথে পরিচিত ( ডিফল্টরূপে ), তবে সেগুলি ম্যানুয়ালি ওভারিডেবল।

— গ্যাব্রিয়েল পেট্রিওলি

4

ভুল বা না, ফায়ারবাগ আমাকে যা দেখিয়েছিল তা খুব বিভ্রান্তিকর: ফন্টের আকার 12, তবে গণনা করা এখনও 13.3333 হয়ে গেছে। গ্যাবির উত্তরের সাথে সামঞ্জস্য রেখে ফন্ট-আকার নির্ধারণের পরে আমার সমস্যাটি সমাধান হয়ে গেছে: ও

— জেরোইন

@ গ্যাবি এটি সবসময়ই খুব ভাল যে ডিজাইনাররা আমাদের বিকাশকারীদের জন্য সমস্ত চিন্তাভাবনা তৈরি করে ...;)

— এজিওয়াই ক্ল্যাটড জেরাল্ড

এছাড়াও যদি আপনি inputভিতরে রাখেন label, labelট্যাগটি ডিফল্ট CSS এর উত্তরাধিকার সূত্রে প্রাপ্ত হয় না

— AmerllicA

16

ফর্ম আইটেম (ইনপুট / টেক্সারিয়া / ইত্যাদি) হরফের তথ্য পায় না। আপনাকে সেই আইটেমগুলিতে ফন্ট-পরিবার সেট করতে হবে।

— জন সবুজ
সূত্র

@ ঝোঁ ওয়াট কখনও আপনার বক্তব্য সত্য হতে পারে, এ সম্পর্কে কোনও মান / বৈধ নথি আছে কি ??

— ডায়োক

হরফ উপাদানগুলি রঙ, পটভূমি ইত্যাদিরও উত্তরাধিকারী হয় না। আসলে, পুরো এইচটিএমএল / সিএসএসের মধ্যে ফন্টের উপাদানগুলি সবচেয়ে অবিশ্বাস্য জিনিস! আপনি একটি ইনপুট বাক্সের জন্য প্রস্থ নির্দিষ্ট করতে পারবেন না এবং গ্যারান্টি সমস্ত ব্রাউজারে একই হবে!

— আয়নুয়ে স্টাইকু

আমি ফর্ম উপাদান বলতে চাই। এখনও ঘুমিয়ে আছে :)

— আয়নু স্টাইকু

@diEcho - সত্য, আমি চশমা মাধ্যমে একটি অনুসন্ধান করেছি, এবং এটি কোথাও বলা হয় না দেখতে। 'সম্পর্কিত' সন্ধান করা, এবং এসও আমাকে একটি সদৃশ প্রশ্ন লিঙ্ক দিচ্ছে: স্ট্যাকওভারফ্লো / প্রশ্ন / 2874813 (যা আমার উত্তর দেয়, যদিও কোনও নির্দিষ্ট লিঙ্ক ছাড়াই)। ক্রোমের ডিফল্ট স্টাইলশিট হ'ল ফন্টকে "-webkit-small-control;" হিসাবে তালিকাভুক্ত করে, যার অর্থ এটি ইতিমধ্যে শরীরকে ছাড়িয়ে গেছে, তাই শরীরের উপর সেট করা কোনও কিছুর চেয়ে বেশি নির্দিষ্ট। টিডি উপাদানগুলির ক্ষেত্রেও এটি একই রকম হয়, যদি আমার ভুল না হয়। সুতরাং "কীভাবে এটি হয় তা" ছাড়া আর কী বলব আমি জানি না। :)

— জন গ্রিন

5

তিন বছর পর, আমি এটা অদ্ভুত খোঁজার করছি <input>ধরনের উপাদান reset, submitএবং buttonউত্তরাধিকারী না font-familyChrome বা Safari তে। আমি আবিষ্কার করেছি যে তারা কোনও প্যাডিং পাবে না।

তবে যখন আমি নির্দিষ্ট বৈশিষ্ট্যগুলি, যেমন background, borderবা এই অদ্ভুত appearanceসম্পত্তিটির সাথে জগাখিচুটি করি font-familyএবং তখন paddingতার প্রভাব পড়ে তবে বাটনটির নেটিভ চেহারা এবং অনুভূতিটি নষ্ট হয়ে যায়, আপনি যদি বোতামগুলি পুরোপুরি রিসিলিং করে থাকেন তবে কোনও সমস্যা নেই।

যদি আপনি উত্তরাধিকার সূত্রে নেটিভ লুকিং বোতামটি চান font-familyতবে এর <button>পরিবর্তে উপাদানটি ব্যবহার করুন <input>।

কোডেপেন দেখুন ।

— স্টুটি
সূত্র

1

আমারও একই সমস্যা ছিল আমার জন্য যা কাজ করেছিল তা হ'ল এইচটিএমএলে ইনপুট উপাদানটিতে সরাসরি শৈলী যুক্ত করে। আমি প্রতিক্রিয়া এফআইআই এ কোডিং করছি।

<input style={{fontFamily: "YOUR_FONT_CHOICE_HERE"}} />

— rpd1297
সূত্র