چه تکنولوژی می‌خواهید یاد بگیرید؟

نظرات و انتقادات خود را با ما در میان بگذارید.

آپدیت روزانه

بیش از 500 پست آموزشی

نیازهای روز

تغییر استایل متن انتخابی با استفاده از CSS

بازنویسی تغییر استایل متن انتخابی یکی از قابلیت‌های جدیدی است که در نسخه CSS3 معرفی گردید. با بکارگیری انتخابگر selection:: قادر خواهید بود پیش زمینه متن انتخابی را تغییر دهید که البته به صورت پیشفرض رنگ آبی در نظر گرفته می‌شود. در زمان نوشتن این پست مرورگرهای iOS Safari و Opera Mini قادر به پشتیبانی از این قابلیت نیستند.

/* IE9  - Also picked up by most modern browsers */
::selection {
  background-color:#AC2937;
}
/* Mozilla based - Gecko Rendering */ 
::-moz-selection {
  background-color:#AC2937;
}

دستور بالا به صورت کلی بر روی همه عناصر صفحه اعمال خواهد شد بدین منظور برای اعمال فیلتر به صورت زیر اقدام کنید:

p.red::selection {
  background-color: #ffb7b7;
}
p.red::-moz-selection {
  background-color: #ffb7b7;
}
p.blue::selection {
  background-color: #a8d1ff;
}
p.blue::-moz-selection {
  background-color: #a8d1ff;
}
p.yellow::selection {
  background-color: #fff2a8;
}
p.yellow::-moz-selection {
  background-color: #fff2a8;
}

مثال:

لازم به ذکر است علاوه بر تغییر استایل متن انتخابی با استفاده از CSS قادر هستید فیلترهای به منظور اعمال بر روی یک بخش خاص از صفحه توسط انتخابگر اعمال کنید:

.blog-post ::selection {
  background-color:#009E30;
}
.blog-post ::-moz-selection {
  background-color:#009E30;
}


...

امید نصری

0 نظر:

تعداد دیدگاه‌های کاربران : 0 دیدگاه
مهمان گرامی! برای ارسال نظر نیاز است وارد سایت شوید.


You must ورود to comment.