কম্পিউটার টিউটোরিয়াল

CSS দিয়ে ডিফল্ট টেক্সট সিলেকশন রঙ ওভাররাইড করা

`::selection` পসিডো-এলিমেন্ট ব্যবহার করে ইউজার টেক্সট সিলেক্ট করলে হাইলাইট রঙ কাস্টমাইজ করা যায়।

উদাহরণ: টেক্সট সিলেকশন রঙ

<!DOCTYPE html>
<html>
<head>
<style>
  ::-moz-selection { color: rgb(255, 255, 255); background: rgb(118, 69, 231); }
  ::selection { color: rgb(255, 255, 255); background: rgb(118, 69, 231); }
  body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
  p { font-size: 40px; }
</style>
</head>
<body>
  <h1>টেক্সট সিলেকশন রঙ উদাহরণ</h1>
  <h2>কিছু টেক্সট সিলেক্ট করুন সিলেকশন রঙ দেখতে</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consequuntur fugiat doloremque adipisci vero iste soluta ea ut! Exercitationem rem dolore delectus modi repellat quo mollitia temporibus laudantium, alias itaque tempora, iure voluptatem non voluptas, deleniti laborum? Cum ducimus unde, vitae consequuntur nobis dignissimos similique officia possimus quis necessitatibus praesentium!</p>
</body>
</html>

কোড ব্যাখ্যা

  • ::selection: স্ট্যান্ডার্ড সিনট্যাক্স (Chrome, Safari, Edge, Firefox ৬২+)।
  • ::-moz-selection: পুরনো Firefox-এর জন্য।
  • সাপোর্টেড প্রোপার্টি: color, background, background-color, text-shadow।

ব্যবহার ক্ষেত্র

ব্র্যান্ড রঙ অনুযায়ী সিলেকশন হাইলাইট কাস্টমাইজ করে ব্র্যান্ডিং বেড়ানো যায়।

  1. CSS দিয়ে আউটলাইন বাটন স্টাইল করা

  2. CSS দিয়ে টেক্সট বাটন স্টাইল করার পদ্ধতি

  3. CSS দিয়ে গ্লোইং (Glowing) টেক্সট তৈরি

  4. CSS দিয়ে প্লেসহোল্ডার (Placeholder) এট্রিবিউটের রঙ পরিবর্তন