এইচটিএমএল পাঠ্য বাক্সের আকারটি কীভাবে সেট করব?

Question

এইচটিএমএল পাঠ্য বাক্সের আকারটি কীভাবে সেট করব?

Answer 1

শুধু ব্যবহার করুন:

textarea {
    width: 200px;
}

অথবা

input[type="text"] {
    width: 200px;
}

আপনি 'টেক্সটবক্স' দ্বারা কী বোঝাতে চান তার উপর নির্ভরশীল।

Comments

দ্রষ্টব্য: inputinput

— হোমার

একটি পাঠ্যবাক্স <input type="textbox" />এবং একটি টেক্সটরিয়ায় <textarea></textarea>পার্থক্য রয়েছে।

— মাইকেল গ্যারিসন

% এ কীভাবে করবেন?

— একটি কোডার

আপনি @MichaelGarrison মানে type="text"? type="textbox"কোথাও সংজ্ঞায়িত খুঁজে পাওয়া যায় না : w3.org/TR/html5/forms.html#states-of-type-attribute

— স্টিফান এল

হ্যাঁ, type="text"আমি যা বোঝাতে চেয়েছি, আমি তাড়াতাড়ি লিখেছিলাম

— মাইকেল গ্যারিসন

Answer 2

আপনার মার্কআপ:

<input type="text" class="resizedTextbox" />

সিএসএস:

.resizedTextbox {width: 100px; height: 20px}

মনে রাখবেন যে পাঠ্য বাক্স আকারটি ডাব্লু 3 সি বক্স মডেলের "শিকার" । আমি ভুক্তভোগী বলতে যা বোঝাতে চাইছি তা হ'ল পাঠ্য বাক্সের উচ্চতা এবং প্রস্থটি প্যাডিংয়ের উচ্চতা / প্রস্থ এবং সীমানা প্রস্থ ছাড়াও উপরে উল্লিখিত উচ্চতা / প্রস্থ বৈশিষ্ট্যের সমষ্টি। এই কারণে, আপনার পাঠ্য বাক্সগুলি বিভিন্ন ব্রাউজারে ডিফল্ট প্যাডিংয়ের উপর নির্ভর করে বিভিন্ন ব্রাউজারগুলিতে কিছুটা আলাদা আকারের হবে। যদিও বিভিন্ন ব্রাউজারগুলি পাঠ্য বাক্সগুলিতে বিভিন্ন প্যাডিং সংজ্ঞায়িত করে, বেশিরভাগ পুনরায় সেট স্টাইল শিটগুলি<input /> তাদের রিসেট শিটগুলিতে ট্যাগগুলি অন্তর্ভুক্ত করে না , তাই এটি মনে রাখা উচিত।

আপনি নিজের প্যাডিং সংজ্ঞায়িত করে এটি মানক করতে পারেন। এখানে নির্দিষ্ট প্যাডিং সহ আপনার সিএসএস রয়েছে, সুতরাং পাঠ্য বাক্সটি সমস্ত ব্রাউজারগুলিতে একই দেখায়:

.resizedTextbox {width: 100px; height: 20px; padding: 1px}

আমি 1 পিক্সেল প্যাডিং যুক্ত করেছি কারণ কিছু ব্রাউজার প্যাডিং 0 পিক্স হলে টেক্সট বাক্সটিকে খুব ক্রেমযুক্ত দেখায়। আপনার নকশার উপর নির্ভর করে আপনি আরও বেশি প্যাডিং যুক্ত করতে চাইতে পারেন তবে প্যাডিংটি নিজেকে সংজ্ঞায়িত করার পক্ষে বাঞ্ছনীয়, অন্যথায় আপনি নিজের সিদ্ধান্ত নেওয়ার জন্য এটি বিভিন্ন ব্রাউজারে রেখে যাবেন। ব্রাউজারগুলি জুড়ে আরও বেশি ধারাবাহিকতার জন্য আপনার নিজের সীমানাটিও সংজ্ঞায়িত করা উচিত।

Answer 3

input[type="text"]
{
    width:200px
}

Answer 4

আপনার পাঠ্যবক্স কোড:

<input type="text" class="textboxclass" />

আপনার সিএসএস কোড:

input[type="text"] {
height: 10px;
width: 80px;
}

অথবা

.textboxclass {
height: 10px;
width: 80px;
}

সুতরাং, প্রথমে আপনি আপনার উপাদানটি বৈশিষ্ট্যগুলি (প্রথম উদাহরণটি দেখুন) বা ক্লাসগুলি (শেষ উদাহরণটি দেখুন) দিয়ে নির্বাচন করুন। পরে, আপনি আপনার উপাদানকে উচ্চতা এবং প্রস্থের মান নির্ধারণ করেন।

Comments

আপনার উপদেশের জন্য ধন্যবাদ. আমি ইতিমধ্যে এটি সম্পাদনা করেছি। আমি আরও ভাল প্রশ্ন জিজ্ঞাসা করার চেষ্টা করব।

— লাইটসাবার

Answer 5

এটি আইই 10 এবং এফএফ 23 এ আমার জন্য কাজ করে

<input type="text" size="100" />

Comments

না এটি অনেক সময় কাজ করবে না যেমন বর্তমান ক্রোম ওরফে সর্বাধিক জনপ্রিয় ব্রাউজার সার্কা 2015

— টম স্টিকেল

ভবিষ্যতে এফওয়াইআই যে কেউ এটি পড়ছেন, ২০১ mid সালের মাঝামাঝি সময়ে ক্রোম 58 টিতে দুর্দান্ত কাজ করে।

— রিক

Answer 6

আপনি যদি ক্লাস পদ্ধতিটি ব্যবহার করতে না চান তবে আপনি পাঠ্য বাক্সে পরিবর্তনগুলি করতে পিতামাতার-শিশু পদ্ধতি ব্যবহার করতে পারেন।

যেমন যেমন আমি আমার ফর্ম Div এ একটি ফর্ম তৈরি করেছি।

এইচটিএমএল কোড:

<div class="form">
<textarea name="message" rows="10" cols="30" >Describe your project in detail.</textarea>
</div>

এখন সিএসএস কোড এর মত হবে:

.form textarea{
    height: 220px;
    width: 342px; 

সমস্যা সমাধান.

Answer 7

সাবধান! প্রস্থের বৈশিষ্ট্যটি সর্বোচ্চ-প্রস্থের বৈশিষ্ট্য দ্বারা ক্লিপ করা হয়। তাই আমি ব্যবহার করেছি ....

    <form method="post" style="width:1200px">
    <h4 style="width:1200px">URI <input type="text" name="srcURI" id="srcURI" value="@m.SrcURI" style="width:600px;max-width:600px"/></h4>

Answer 8

চেষ্টা করুন:

input[type="text"]{
padding:10px 0;}

এইভাবে পাঠ্যবক্সের জন্য কী পাঠ্যসূচি সেট করা হয়েছে তার থেকে এটি স্বাধীন থাকে। পরিবর্তে প্যাডিং ব্যবহার করে আপনি উচ্চতা বৃদ্ধি করছেন

Answer 9

এই কোড ব্যবহার করে দেখুন:

input[type="text"]{
 padding:10px 0;}

এইভাবে এটি পাঠ্যবক্সের জন্য কী পাঠ্যসূচী সেট করা হয়েছে তার থেকে আলাদা থাকে। পরিবর্তে প্যাডিং ব্যবহার করে আপনি উচ্চতা বৃদ্ধি করছেন।

Answer 10

উপাদান heightএবং widthবৈশিষ্ট্যগুলির সাথে আকার নির্ধারণ করা যায় ।

Answer 11

আপনি নির্ভর করে ইনপুট প্রস্থ বনাম ধারক প্রস্থ করতে পারেন।

.container {
   width: 360px;
}

.container input {
   width: 100%;
}