কিভাবে CSS ব্যবহার করে HTML ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট কালার পরিবর্তন করবেন

কিভাবে CSS ব্যবহার করে HTML ইনপুট ফিল্ডে প্লেসহোল্ডার টেক্সট কালার পরিবর্তন করবেন
Mia Chevalier
মঙ্গলবার, ১৮ জুন, ২০২৪ ৯:০৫:০৫ AM
CSS

CSS সহ প্লেসহোল্ডার টেক্সট স্টাইল করা

HTML ফর্মগুলির সাথে কাজ করার সময়, আপনি ইনপুট ক্ষেত্রের মধ্যে স্থানধারক পাঠ্যের উপস্থিতি কাস্টমাইজ করতে চাইতে পারেন। যদিও Chrome v4 এবং অন্যান্য ব্রাউজার ইনপুট[type=text] উপাদানগুলিতে প্লেসহোল্ডার অ্যাট্রিবিউট সমর্থন করে, এই অ্যাট্রিবিউটে কেবল CSS শৈলী প্রয়োগ করা সবসময় প্রত্যাশিতভাবে কাজ করে না।

উদাহরণস্বরূপ, স্ট্যান্ডার্ড CSS নির্বাচক ব্যবহার করে স্থানধারক পাঠ্যের রঙ পরিবর্তন করার চেষ্টা করা পছন্দসই ফলাফল দেবে না। এই নিবন্ধটি অন্বেষণ করে কিভাবে আপনি সঠিক CSS ছদ্ম-উপাদান এবং ব্রাউজার-নির্দিষ্ট নিয়ম ব্যবহার করে স্থানধারক পাঠ্যের রঙ কার্যকরভাবে পরিবর্তন করতে পারেন।

আদেশ বর্ণনা
::placeholder CSS-এ একটি ছদ্ম-উপাদান একটি ইনপুট ক্ষেত্রের স্থানধারক পাঠ্যকে স্টাইল করতে ব্যবহৃত হয়।
:focus CSS-এ একটি ছদ্ম-শ্রেণি শৈলী প্রয়োগ করতে ব্যবহৃত হয় যখন কোনো উপাদান ফোকাস করা হয়, যেমন যখন কোনো ব্যবহারকারী কোনো ইনপুট ক্ষেত্রে ক্লিক করে।
opacity একটি CSS বৈশিষ্ট্য যা একটি উপাদানের স্বচ্ছতা স্তর সেট করে। স্থানধারক পাঠ্য সম্পূর্ণরূপে দৃশ্যমান তা নিশ্চিত করতে এখানে ব্যবহার করা হয়েছে।
DOMContentLoaded একটি জাভাস্ক্রিপ্ট ইভেন্ট যা প্রাথমিক HTML ডকুমেন্ট সম্পূর্ণরূপে লোড এবং পার্স করা হলে ফায়ার করা হয়।
querySelector একটি জাভাস্ক্রিপ্ট পদ্ধতি যা নথির মধ্যে প্রথম উপাদান প্রদান করে যা একটি নির্দিষ্ট CSS নির্বাচকের সাথে মেলে।
addEventListener একটি জাভাস্ক্রিপ্ট পদ্ধতি যা বিদ্যমান ইভেন্ট হ্যান্ডলারকে ওভাররাইট না করে একটি উপাদানের সাথে একটি ইভেন্ট হ্যান্ডলার সংযুক্ত করে।
setAttribute একটি জাভাস্ক্রিপ্ট পদ্ধতি যা নির্দিষ্ট উপাদানের একটি বৈশিষ্ট্যের মান সেট করে। স্থানধারক পাঠ্য আপডেট করতে এখানে ব্যবহার করা হয়েছে।

প্লেসহোল্ডার টেক্সট স্টাইলিং কৌশল বোঝা

প্রথম স্ক্রিপ্ট ব্যবহার ::placeholder, একটি CSS ছদ্ম-উপাদান যা বিশেষভাবে একটি ইনপুট ক্ষেত্রের স্থানধারক পাঠ্যকে লক্ষ্য করে। এটি অত্যন্ত গুরুত্বপূর্ণ কারণ স্ট্যান্ডার্ড CSS নির্বাচকরা স্থানধারক পাঠ্যকে প্রভাবিত করে না। ব্যবহার করে input::placeholder, আমরা স্থানধারক পাঠ্যে সরাসরি শৈলী প্রয়োগ করতে পারি, যেমন এর রঙ পরিবর্তন করে লাল করা। উপরন্তু, স্ক্রিপ্ট ব্রাউজার-নির্দিষ্ট নির্বাচকদের মত অন্তর্ভুক্ত input:-moz-placeholder মজিলা ফায়ারফক্সের জন্য এবং input::-ms-input-placeholder ইন্টারনেট এক্সপ্লোরার এবং মাইক্রোসফ্ট এজ এর জন্য। এই নির্বাচকরা বিভিন্ন ব্রাউজার জুড়ে সামঞ্জস্যতা নিশ্চিত করে, ব্যবহারকারীর ব্রাউজার পছন্দ নির্বিশেষে স্থানধারক পাঠ্যের রঙকে অভিন্নভাবে স্টাইল করার অনুমতি দেয়।

দ্বিতীয় স্ক্রিপ্টটি স্থানধারক পাঠ্যের রঙকে গতিশীলভাবে পরিবর্তন করতে JavaScript ব্যবহার করে। এটি দিয়ে শুরু হয় DOMContentLoaded প্রাথমিক HTML নথি সম্পূর্ণরূপে লোড হওয়ার পরেই স্ক্রিপ্ট চালানো নিশ্চিত করার জন্য ইভেন্ট। দ্য querySelector পদ্ধতি তারপর ইনপুট উপাদান নির্বাচন করতে ব্যবহার করা হয়. ইভেন্ট শ্রোতাদের ফোকাস এবং অস্পষ্ট ঘটনা পরিচালনা করতে এই উপাদান যোগ করা হয়. যখন ইনপুট ক্ষেত্রটি ফোকাস লাভ করে, তখন স্থানধারক পাঠ্যটি সাফ করা হয় এবং ইনপুট পাঠ্যের রঙটি কালোতে সেট করা হয়। যখন ইনপুট ক্ষেত্র ফোকাস হারায়, স্থানধারক পাঠ্য পুনরুদ্ধার করা হয়, এবং এর রঙ লাল সেট করা হয়। দ্য setAttribute প্লেসহোল্ডার অ্যাট্রিবিউটকে গতিশীলভাবে আপডেট করতে মেথড ব্যবহার করা হয়, যাতে প্লেসহোল্ডার টেক্সট প্রত্যাশিতভাবে দেখা যায় এবং অদৃশ্য হয়ে যায়।

CSS দিয়ে প্লেসহোল্ডার টেক্সট কালার পরিবর্তন করা হচ্ছে

CSS ছদ্ম-উপাদান ব্যবহার করা

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

প্লেসহোল্ডার টেক্সট রঙ পরিচালনা করতে ব্যাকএন্ড লজিক প্রয়োগ করা হচ্ছে

ডাইনামিক প্লেসহোল্ডার স্টাইলিং এর জন্য জাভাস্ক্রিপ্ট ব্যবহার করা

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

স্থানধারক স্টাইলিং জন্য উন্নত কৌশল

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

বিবেচনা করার আরেকটি দিক হল ফ্রেমওয়ার্ক এবং লাইব্রেরির ব্যবহার যা বর্ধিত স্টাইলিং ক্ষমতা প্রদান করে। বুটস্ট্র্যাপ এবং ফ্রেমওয়ার্ক যেমন টেইলউইন্ড সিএসএসের মতো লাইব্রেরিগুলি পূর্বনির্ধারিত ক্লাসগুলি প্রদান করে যা স্থানধারক সহ স্টাইল গঠনে সহায়তা করতে পারে। এই সরঞ্জামগুলি সময় বাঁচাতে পারে এবং অ্যাপ্লিকেশনের বিভিন্ন অংশে ধারাবাহিকতা নিশ্চিত করতে পারে। অতিরিক্তভাবে, SASS বা কম এর মত প্রিপ্রসেসরগুলি ব্যবহার করে CSS কে নেস্টিং, মিক্সিন এবং ইনহেরিট্যান্সের মত বৈশিষ্ট্য সহ আরও উন্নত করতে পারে, যা কোডটিকে আরও রক্ষণাবেক্ষণযোগ্য এবং মাপযোগ্য করে তোলে।

Styling Placeholder Text সম্পর্কে প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

  1. আমি কিভাবে সমস্ত ব্রাউজারে স্থানধারক পাঠ্যের রঙ পরিবর্তন করতে পারি?
  2. ব্যবহার ::placeholder, :-moz-placeholder, :-ms-input-placeholder, এবং ::-ms-input-placeholder নির্বাচকরা বিভিন্ন ব্রাউজার জুড়ে সামঞ্জস্য নিশ্চিত করতে।
  3. আমি কি গতিশীলভাবে স্থানধারক পাঠ্যের রঙ পরিবর্তন করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারি?
  4. হ্যাঁ, আপনি জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন ইভেন্ট শ্রোতাদের ফোকাস এবং ব্লার ইভেন্টের জন্য যোগ করতে এবং তারপর ব্যবহার করতে পারেন setAttribute স্থানধারক পাঠ্য এবং এর রঙ পরিবর্তন করতে।
  5. CSS ভেরিয়েবল কি এবং কিভাবে তারা স্টাইলিং স্থানধারকদের সাহায্য করতে পারে?
  6. CSS ভেরিয়েবল আপনাকে মানগুলি সঞ্চয় করার অনুমতি দেয় যা স্টাইলশীট জুড়ে পুনরায় ব্যবহার করা যেতে পারে, এটি একাধিক উপাদান জুড়ে ধারাবাহিকভাবে শৈলী আপডেট করা সহজ করে তোলে।
  7. SASS বা কম এর মত CSS প্রিপ্রসেসর ব্যবহার করার সুবিধা কি?
  8. সিএসএস প্রিপ্রসেসরগুলি নেস্টিং, মিক্সিন এবং উত্তরাধিকারের মতো বৈশিষ্ট্যগুলি অফার করে, যা সিএসএস কোডকে আরও রক্ষণাবেক্ষণযোগ্য এবং মাপযোগ্য করে তোলে।
  9. বুটস্ট্র্যাপ বা টেইলউইন্ড সিএসএস এর মত ফ্রেমওয়ার্ক কি স্টাইলিং প্লেসহোল্ডারদের সাহায্য করতে পারে?
  10. হ্যাঁ, এই ফ্রেমওয়ার্কগুলি পূর্বনির্ধারিত ক্লাসগুলি প্রদান করে যা স্টাইল গঠনের উপাদানগুলিকে সাহায্য করতে পারে, যার মধ্যে স্থানধারক, সময় বাঁচানো এবং সামঞ্জস্যতা নিশ্চিত করা যায়।
  11. স্থানধারক পাঠ্য রঙ অ্যানিমেট করার একটি উপায় আছে?
  12. যদিও স্থানধারক পাঠ্যের সরাসরি অ্যানিমেশন সম্ভব নয়, আপনি স্থানধারক পাঠ্য পরিবর্তন করতে এবং অনুরূপ প্রভাবের জন্য ইনপুট ক্ষেত্রে CSS রূপান্তর প্রয়োগ করতে JavaScript ব্যবহার করতে পারেন।
  13. আমি কি প্লেসহোল্ডার টেক্সট স্টাইল করতে ইনলাইন CSS ব্যবহার করতে পারি?
  14. না, ইনলাইন সিএসএস ছদ্ম-উপাদান সমর্থন করে না ::placeholder. আপনাকে একটি স্টাইলশীট বা একটি ব্যবহার করতে হবে <style> HTML এর মধ্যে ব্লক করুন।
  15. প্লেসহোল্ডার টেক্সট স্টাইল করার সময় কিছু সাধারণ সমস্যাগুলি কী কী?
  16. সাধারণ সমস্যাগুলির মধ্যে রয়েছে ক্রস-ব্রাউজার সামঞ্জস্যের জন্য হিসাব না করা, ফায়ারফক্সের জন্য অস্বচ্ছতা অন্তর্ভুক্ত করতে ভুলে যাওয়া এবং সঠিক ছদ্ম-উপাদান বা ব্রাউজার-নির্দিষ্ট নির্বাচকদের ব্যবহার না করা।

প্লেসহোল্ডার স্টাইলিং কৌশল সম্পর্কে চূড়ান্ত চিন্তা

HTML ইনপুট ক্ষেত্রগুলিতে স্থানধারক পাঠ্যের রঙ পরিবর্তন করার জন্য CSS এবং JavaScript সমাধানগুলির সমন্বয় প্রয়োজন। CSS ছদ্ম-উপাদান এবং ব্রাউজার-নির্দিষ্ট নির্বাচক ব্যবহার করে সামঞ্জস্য নিশ্চিত করে, যখন JavaScript ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর ভিত্তি করে গতিশীল পরিবর্তন সক্ষম করে। CSS ভেরিয়েবল, ফ্রেমওয়ার্ক এবং প্রিপ্রসেসরের মতো উন্নত কৌশলগুলি স্টাইলিং প্রক্রিয়াটিকে আরও উন্নত করতে পারে, এটিকে আরও দক্ষ এবং বজায় রাখতে পারে। এই পদ্ধতিগুলি আয়ত্ত করা ফর্মের নান্দনিকতার উপর আরও ভাল নিয়ন্ত্রণের অনুমতি দেয়, ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।