এইচটিএমএল ইনপুট উপাদানের স্থানধারক পাঠ্যকে সিএসএস দিয়ে স্টাইল করতে, আপনাকে ছদ্ম-উপাদান লক্ষ্য করতে হবে বৈশিষ্ট্য আপনি CSS ছদ্ম নির্বাচক :: দিয়ে এটি করেন .
প্লেসহোল্ডার পাঠ্য সহ একটি নিয়মিত ইনপুট উপাদান
<input type="text" placeholder="Hello there!">ডিফল্ট ব্রাউজার স্টাইলিংয়ের সাথে স্থানধারক পাঠ্যটি কেমন দেখায়:
CSS
এখন চলুন CSS ::placeholder ব্যবহার করি ইনপুট উপাদানের স্থানধারক পাঠ্যকে লাল করতে নির্বাচক:
input::placeholder {
color: red;
}ফলাফলঃ
পুনরায় ব্যবহারযোগ্য স্থানধারক পাঠ্য ক্লাস
আপনি যদি আপনার সমস্ত <input> স্টাইল করতে না চান উপাদান স্থানধারক পাঠ্য একইভাবে, যেমন উপরের কোডটি করে (সরাসরি ইনপুট উপাদানকে লক্ষ্য করে), আপনি একটি ক্লাস ব্যবহার করতে পারেন:
.custom-input-placeholder::placeholder {
color: red;
}এবং আপনি চান এমন যেকোনো ইনপুট উপাদানে এটি যোগ করুন:
<input class="custom-input-placeholder" type="text" placeholder="Hello there!">জেনে রাখা ভালো
ছদ্ম-উপাদানকে বিভ্রান্ত করবেন না ছদ্ম-শ্রেণীর সাথে।
- ছদ্ম-উপাদানগুলি DOM-এর একটি অংশকে উপস্থাপন করে।
- ছদ্ম-শ্রেণীগুলি রাষ্ট্রকে প্রতিনিধিত্ব করে এটির সাথে ব্যবহারকারীদের মিথস্ক্রিয়া উপর ভিত্তি করে একটি উপাদান। যেমন:
:focus, অথবা:active.
সিনট্যাক্স পার্থক্য:
- ছদ্ম-উপাদানগুলিকে একটি ডবল কোলন দিয়ে সংজ্ঞায়িত করা হয়:
:: - ছদ্ম-শ্রেণী একটি একক কোলন
:দিয়ে সংজ্ঞায়িত করা হয়
