<textarea> এবং <টেক্সটফিল্ড কেন শরীর থেকে ফন্ট-পরিবার এবং ফন্ট-আকার নিচ্ছেন না?

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>

যদি এটি একটি স্বাভাবিক আচরণ হয় তবে আমি কি এই জাতীয় CSS তে লিখি। আমার সবার মধ্যে একই স্টাইল দরকার

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

এবং এক্সএইচটিএমএলের আরও কতগুলি উপাদান যা ফন্ট স্টাইলিং গ্রহণ করবে না body {....}?

css xhtml

— জিতেন্দ্র ব্যাস
সূত্র

76

ডিফল্টরূপে, ব্রাউজারগুলি ওএস নিয়ন্ত্রণ বা ব্রাউজার নিয়ন্ত্রণ ব্যবহার করে বেশিরভাগ ফর্ম উপাদান (টেক্সারিয়াস, পাঠ্য বাক্স, বোতাম ইত্যাদি) রেন্ডার করে। সুতরাং বেশিরভাগ ফন্টের বৈশিষ্ট্য ওএস বর্তমানে ব্যবহৃত থিম থেকে নেওয়া হয়েছে।

আপনি ফর্ম উপাদানগুলি তাদের লক্ষ্যবস্তু করতে হবে যদি আপনি তাদের ফন্ট / পাঠ্য শৈলীর পরিবর্তন করতে চান - তবে ঠিক যেমনটি করেছেন ঠিক তেমনভাবে তাদের নির্বাচন করেই সহজ হওয়া উচিত।

যতদূর আমি জানি, কেবল ফর্ম উপাদানগুলি প্রভাবিত হয়। আমার মাথার উপরে অফ: input, button, textarea, select।

— বোল্টক্লক
সূত্র

32

যদি এই আচরণটি অনাকাঙ্ক্ষিত হয় তবে সর্বাধিক প্রত্যক্ষ প্রতিকার হ'ল আপনার স্টাইলগুলিতে যুক্ত করা textarea, input, button, select { font-family: inherit; font-size: inherit; },।

— দেবভিন

@ ডেভভিন, আপনার যুক্ত করা উচিত text-align: inheritকারণ বোতামগুলির পাঠাগুলি প্রায়শই মাঝখানে থাকে।

— জোশুয়া মুহিম

আমি কীভাবে বিপরীত করব, ওরফে, আমার সম্পূর্ণ ওয়েবপৃষ্ঠা / বডির জন্য ওএস ফন্টটি ব্যবহার করব?

— আগ্রাসন

@ জিরাওল্ট আপনি এর মতো কিছু করতে পারেন: বডি {ফন্ট-পরিবার: ব্লিঙ্কম্যাকসিস্টেমফন্ট,-অ্যাপল-সিস্টেম, "সেগোই ইউআই", "রোবোটো", "অক্সিজেন", "উবুন্টু", "ক্যান্টারেল", "ফিরা সানস", "ড্রাগ সানস "," হেলভেটিকা নিউ "," হেলভেটিকা "," আড়িয়াল ", সানস-সেরিফ; }

— getup8

149

ফন্ট সেটিংস উত্তরাধিকারী করার জন্য নির্দিষ্ট নিয়ন্ত্রণগুলি ডিফল্ট হয় না। আপনি এটি আপনার সিএসএসে রেখে ওভাররাইড করতে পারেন:

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।

— স্পোলসন

দুর্ভাগ্যক্রমে ক্রোম (সংস্করণ 59.0.3071.115) হরফ-আকার প্রয়োগ করছে না: উত্তরাধিকারসূত্রে; ফন্ট-পরিবার নির্দিষ্ট না করে।

— ওন্ড্রেজ

font-weight: inherit;অনুপস্থিত.

— সিভডিং

10

সমস্ত ব্রাউজারের অন্তর্নির্মিত ডিফল্ট স্টাইলশিট রয়েছে। এ কারণেই, আপনি যখন কোনও শৈলী ছাড়াই কোনও পৃষ্ঠা নির্ধারণ করেন, <h1>ট্যাগগুলি বড় এবং সাহসী হয় এবং <strong>পাঠ্যকে গা bold় করে তোলে। একইভাবে, ফন্টের শৈলী <input>এবং <textarea>উপাদানগুলি ডিফল্ট শৈলীতে সংজ্ঞায়িত হয়।

ফায়ারফক্সে এই স্টাইলশিটটি দেখতে এটি আপনার ঠিকানা বারে রেখে দিন: resource://gre/res/forms.css

যাইহোক, আপনাকে এই স্টাইলগুলি ওভাররাইড করতে হবে যেমন আপনি শেষের উদাহরণটিতে আপনার মতো অন্য কোনও শৈলীর মতো করেছিলেন।

আপনি যদি ভাবছেন যে অন্যান্য স্টাইলগুলি কী সংজ্ঞায়িত করা হয়েছে, আপনার সংস্থানগুলিতে সিএসএস ফাইলগুলি পরীক্ষা করে দেখুন। আপনি উপরের url এর মাধ্যমে বা resফায়ারফক্স ডিরেক্টরিতে (যেমন c:\program files\mozilla firefox\res:) আপনার ফোল্ডারটি দেখে এগুলি অ্যাক্সেস করতে পারেন । এগুলি হ'ল এটি সাধারণ পৃষ্ঠাগুলির শৈলীতে প্রভাব ফেলতে পারে:

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

— nickf
সূত্র

তবে <h1> হরফ থেকে ফন্টের স্টাইল নিচ্ছে <body>তবে <textarea>নয়

— জিতেন্দ্র ব্যাস

3

স্টাইলগুলি h1কোনও ফন্টকে সংজ্ঞায়িত করে না, সুতরাং আপনার bodyস্টাইলগুলি প্রাধান্য পায়। এর জন্য শৈলীগুলি inputএকটি শৈলীর সংজ্ঞা দেয় এবং এটি আপনার নির্বাচকের চেয়ে বেশি নির্দিষ্ট, তাই এটি জিতে যায়।

— নিক 17

আপনার মন্তব্যের জন্য +1। আমি সচেতন ছিলাম না। আপনার অর্থ কিছু অংশের ডিফল্টরূপে ব্রাউজারে স্পিফিক স্টাইল থাকে এবং শরীরের দ্বারা ওভাররাইড করা যায় না {....}

— জিতেন্দ্র ব্যাস

1

আমি মনে করি তিনি বলতে চাইছেন যে কয়েকটি উপাদান ডিওএমের অন্যদের তুলনায় বেশি নির্দিষ্ট বা তার আরও ছোট সুযোগ রয়েছে। যেহেতু একটি টেক্সেরিয়া দেহের অভ্যন্তরে বিদ্যমান, তাই টেক্সারিয়ার জন্য সংজ্ঞায়িত কোনও স্টাইল শরীরের} les স্টাইলগুলিকে ওভাররাইট করবে। সুতরাং এফএফের ডিফল্ট টেক্সারিয়া স্টাইলটি আপনার দেহের স্টাইলটিকে ওভাররাইট করে, যদিও আপনার পরে সংজ্ঞায়িত করা হয় (সাধারণত সাম্প্রতিক কিছু আগে অগ্রাধিকার গ্রহণ করবে, তবে এটি যদি বিস্তৃত স্কোপে / কম সুনির্দিষ্ট না হয়)।

— user1072406
সূত্র

0

আমি সাধারন পাঠ্যের চেয়ে অনেক বড় ফন্ট ব্যবহার করে মোবাইলে টেক্সারিয়া বন্ধ করতে সমস্ত ধরণের কৌশল চেষ্টা করেছি। দেখে মনে হচ্ছে যখন আমার টেক্সারিয়া কলস = "45" ফন্টটি স্বাভাবিক ছিল তবে তা কলস = "71" তে উঠার সাথে সাথে এটি টিডি ট্যাগের মধ্যে থাকা সত্ত্বেও ফন্টটি বড় হয়ে উঠল।

মোজিলা পৃষ্ঠায় ( https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust ) আমি এটি পেয়েছি

textarea {
   text-size-adjust: none;
}

এটি আমার পক্ষে সেরা উত্তর বলে মনে হচ্ছে। এটি পিসি, ট্যাবলেট এবং সবচেয়ে গুরুত্বপূর্ণভাবে আমার অ্যান্ড্রয়েড ফোনে কাজ করে।

— ব্রায়ান জোন্স
সূত্র