সিএসএস ব্যবহার করে ইনপুট প্লেসহোল্ডারের রঙ কীভাবে পরিবর্তন করবেন

এই ম্যানুয়ালটিতে, আমরা CSS ব্যবহার করে ইনপুট প্লেসহোল্ডারের রঙ পরিবর্তন করার বিভিন্ন পদ্ধতি ব্যাখ্যা করব।

পদ্ধতি 1: '::প্লেসহোল্ডার' নির্বাচক ব্যবহার করে ইনপুট প্লেসহোল্ডার রঙ পরিবর্তন করুন

CSS “ ::স্থানধারক ” নির্বাচক স্থানধারক পাঠ্য সহ ফর্ম উপাদান নির্বাচন করতে ব্যবহৃত হয়। এটি স্থানধারক পাঠ্য পরিবর্তন করতে ব্যবহার করা যেতে পারে। অতিরিক্তভাবে, আপনি ইনপুট স্থানধারকের রঙ পরিবর্তন করতে এই নির্বাচক ব্যবহার করতে পারেন।

বাক্য গঠন

::placeholder এর সিনট্যাক্স নিম্নরূপ:

পরিবর্তে ' মান ”, আপনি আমাদের পছন্দ অনুযায়ী ইনপুট স্থানধারকের রঙ সেট করতে পারেন।

চলুন ব্যবহারিক উদাহরণে যাওয়া যাক, যেখানে আমরা ইনপুট স্থানধারকের রঙ পরিবর্তন করব।

উদাহরণ

ইনপুট প্লেসহোল্ডারের রঙ পরিবর্তন করতে, প্রথমে, আমরা ট্যাগ ব্যবহার করে একটি ইনপুট উপাদান তৈরি করব এবং ইনপুটের ধরণটি ' হিসাবে সেট করব পাঠ্য ” এর পরে, ইনপুট প্লেসহোল্ডারের পাঠ্যটিকে ' হিসাবে সেট করুন প্রবেশ করুন তোমার নাম ”

এইচটিএমএল

প্রদত্ত কোডের আউটপুট হল:

ইনপুট প্লেসহোল্ডারের ডিফল্ট রঙ উপরে দেওয়া ছবিতে দেখানো হয়েছে।

এখন, আমরা CSS-এ চলে যাই এবং ব্যবহার করি ' ::স্থানধারক ইনপুট প্লেসহোল্ডারের পাঠ্য অ্যাক্সেস করতে এবং এর রঙ হিসাবে সেট করতে rgb(17, 0, 255) ”

সিএসএস

আপনি দেখতে পাচ্ছেন, যোগ করা ইনপুট প্লেসহোল্ডারের রঙ নীলে পরিবর্তিত হয়েছে:

ইনপুট স্থানধারকের রঙ পরিবর্তন করার জন্য আরেকটি পদ্ধতি আছে। এটা চেক আউট করা যাক.

পদ্ধতি 2: '::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার' সিউডো-ক্লাস এলিমেন্ট ব্যবহার করে ইনপুট প্লেসহোল্ডারের রঙ পরিবর্তন করুন

' :: - ওয়েবকিট-ইনপুট-প্লেসহোল্ডার ছদ্ম-শ্রেণীর উপাদান প্রাথমিকভাবে একটি ফর্ম উপাদানের স্থানধারক পাঠ্যকে উপস্থাপন করে। স্থানধারক পাঠ্যের চেহারা কাস্টমাইজ করতে থিম ডিজাইনার এবং বিকাশকারীরা এটি ব্যবহার করতে পারেন। উপরন্তু, নির্দিষ্ট উপাদান ব্যবহার করে ব্যবহারকারী একটি ইনপুট স্থানধারকের রঙ পরিবর্তন করতে পারেন।

বাক্য গঠন

::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডারের সিনট্যাক্স এইভাবে দেওয়া হয়েছে:

পরিবর্তে ' মান ”, আপনি ইনপুট স্থানধারকের রঙ সেট করতে পারেন।

উপরের আলোচিত সিউডো-ক্লাস উপাদানটি বোঝার জন্য উদাহরণে যাওয়া যাক।

উদাহরণ

CSS ফাইলে, ' ::-ওয়েবকিট-ইনপুট-প্লেসহোল্ডার ' ছদ্ম-শ্রেণীর উপাদান এবং রঙের মান নির্ধারণ করুন ' rgb(255, 13, 13) ”:

আউটপুট

এখানে, আপনি দেখতে পাচ্ছেন যে ইনপুট স্থানধারকের ডিফল্ট রঙ পরিবর্তিত হয়েছে।

উপসংহার

ইনপুট প্লেসহোল্ডারের রঙ ' ব্যবহার করে পরিবর্তন করা হয় ::স্থানধারক 'নির্বাচক এবং ' :: - ওয়েবকিট-ইনপুট-প্লেসহোল্ডার ছদ্ম-শ্রেণীর উপাদান। এটি ব্যবহার করে, আপনি ইনপুট স্থানধারকের ডিফল্ট রঙ পরিবর্তন করতে পারেন। এই নিবন্ধে, আমরা CSS বৈশিষ্ট্য ব্যবহার করে ইনপুট প্লেসহোল্ডারের রঙ পরিবর্তন সম্পর্কিত পদ্ধতি ব্যাখ্যা করেছি।