কিভাবে একটি ইনপুট ভিতরে পাঠ্য সারিবদ্ধ?

Question

সমস্ত ডিফল্ট ইনপুটগুলির জন্য, আপনি পূরণ করা পাঠ্যটি বামদিকে শুরু হয়। আপনি কীভাবে এটি ডানদিকে শুরু করবেন?

Comments

এটি ক্ষেত্রগুলি ডান থেকে বাম ভাষার সাথে সামঞ্জস্যপূর্ণ পরিবর্তন করছে?

— এস আলবানো

ইনপুট {পাঠ্য-সারিবদ্ধ: ডান; }

— রসিকা

Answer 1

আপনার সিএসএসে টেক্সট-সারিবদ্ধ সম্পত্তি ব্যবহার করুন :

input { 
    text-align: right; 
}

এটি পৃষ্ঠার সমস্ত ইনপুটগুলিতে কার্যকর হবে।
অন্যথায়, আপনি যদি কেবল একটি ইনপুটটির পাঠ্য সারিবদ্ধ করতে চান তবে শৈলীর ইনলাইন সেট করুন:

<input type="text" style="text-align:right;"/> 

Answer 2

আপনার সিএসএস এ চেষ্টা করুন:

input {
text-align: right;
}

কেন্দ্রে পাঠ্য সারিবদ্ধ করতে:

input {
text-align: center;
}

তবে, এটি বাম-প্রান্তিক হওয়া উচিত, কারণ এটি পূর্বনির্ধারিত - এবং এটি সবচেয়ে বেশি ব্যবহারকারী বান্ধব বলে মনে হয়।

Answer 3

আপনি এখানে যান :

input[type=text] { text-align:right }

<form>
    <input type="text" name="name" value="">
</form>

Answer 4

এখানে গৃহীত উত্তরটি সঠিক তবে আমি একটি সামান্য তথ্য যুক্ত করতে চাই। আপনি যদি বুটস্ট্র্যাপের মতো লাইব্রেরি / ফ্রেমওয়ার্ক ব্যবহার করেন তবে এর জন্য ক্লাসগুলিতে বিল্ট থাকতে পারে। উদাহরণস্বরূপ বুটস্ট্র্যাপ text-rightক্লাস ব্যবহার করে । এটি এর মতো ব্যবহার করুন:

<input type="text" class="text-right"/> 
<input type="number" class="text-right"/>

একটি নোট হিসাবে এটি অন্যান্য ইনপুট ধরণের উপরও কাজ করে যেমন সংখ্যাসূচক হিসাবে কাজ করে।

আপনি যদি বুটস্ট্র্যাপের মতো দুর্দান্ত কাঠামো ব্যবহার না করেন তবে আপনি এই সহায়ক শ্রেণীর নিজস্ব সংস্করণ তৈরি করতে পারেন। অন্যান্য উত্তরের অনুরূপ তবে আমরা এটি সরাসরি ইনপুট শ্রেণিতে যুক্ত করতে যাচ্ছি না সুতরাং এটি আপনার সাইট বা পৃষ্ঠার প্রতিটি একক ইনপুটটিতে প্রযোজ্য নয়, এটি পছন্দসই আচরণ হতে পারে না। সুতরাং এটি ইনলাইন স্টাইলিংয়ের প্রয়োজন বা প্রতিটি একক ইনপুট বাক্সকে প্রভাবিত না করেই জিনিসগুলি সরাসরি সারিবদ্ধ করার জন্য একটি দুর্দান্ত সহজ সিএসএস শ্রেণি তৈরি করবে।

.text-right{
    text-align: right;
}

এখন আপনি এই ক্লাসটি উপরের ইনপুটগুলির সাথে ঠিক একইভাবে ব্যবহার করতে পারেন class="text-right"। আমি জানি এটি এতগুলি মূল স্ট্রোক সংরক্ষণ করে না তবে এটি আপনার কোডকে আরও পরিষ্কার করে তোলে।

Answer 5

আপনি যদি পাঠ্য ফোকাসটি হ্রাস করার পরে ডানদিকে সারিবদ্ধ করতে চান তবে আপনি দিক পরিবর্তনকারীটি ব্যবহার করার চেষ্টা করতে পারেন। ফোকাস হারাবার পরে এটি পাঠ্যের ডান অংশটি প্রদর্শন করবে। উদাহরণস্বরূপ দরকারী যদি আপনি একটি বড় পথে ফাইলের নামটি দেখাতে চান।

input.rightAligned {
  direction:ltr;
  overflow:hidden;
}
input.rightAligned:not(:focus) {
  direction:rtl;
  text-align: left;
  unicode-bidi: plaintext;
  text-overflow: ellipsis;
}

<form>
    <input type="text" class="rightAligned" name="name" value="">
</form>

নির্বাচকটি বর্তমানে ভাল সমর্থিত: ব্রাউজার সমর্থন

Answer 6

@ এইচটিএমএল.টেক্সটবক্সফোর্ড (মডেল => মডেল.আইসুইডেট, নতুন {@ ক্লাস = "ফর্ম-নিয়ন্ত্রণ", নাম = "ইনভ_সিয়ু_ডেট", আইডি = "ইনভ_সিসি_ডেট", শিরোনাম = "চালানের ইস্যু তারিখ নির্বাচন করুন", স্থানধারক = "ডিডি / মিমি / yyyy ", শৈলী =" পাঠ্য-প্রান্তিককরণ: কেন্দ্র; "})

Answer 7

সিএসএস ছাড়াই: পাঠ্য ইনপুটটির স্টাইল সম্পত্তি ব্যবহার করুন

স্টাইল = "পাঠ্য-সারিবদ্ধ: ডান;"

Comments

এটি এখনও সিএসএস, কেবল ইনলাইন সিএসএস।

— মার্টিন হ্যানসেন

স্টাইল বৈশিষ্ট্যটি ইনলাইন সিএসএস তৈরি করতে ব্যবহৃত হয়। কোডটি text-align:rightঅবশ্যই সিএসএস।

— রন