تغيير لون ولون خلفية النص المُحدّد

عندما يتعلق الأمر بتخصص مواقعنا الخيارات المتوفرة لنا لا حدود لها، فمثلا في ووردبريس وكما رأينا سابقا يمكننا فعل أشياء كثيرة منها، تغيير لون تعليقات الأعضاء، تغيير شكل القوائم الغير مرتبة، تخصيص صفحة تسجيل الدخول، عرض محتوى المقالات على شكل أعمدة…

هذه الأشياء قد تبدو دون قيمة بالنسبة لبعض الأشخاص ولا تفيد الموقع في شيء، لكن إذا فكرت في الأمر جيدا ستجد أن من خلال هذا النوع من التخصيصات يمكنك خلق الاختلاف وجعل موقعك منفردا ومميزا عن باقي المواقع التي هي متشابهة في أغلبيتها.

موضوعنا اليوم يا سادة هو تغيير لون الخلفية عند تحديد النص، افتراضيا المتصفحات تضع خلفية زرقاء ولون خط أبيض للنصوص عند تحديدها، لكن بواسطة المحدد ::selection يمكننا التحكم في هذا التنسيق وجعله كما نريد.

فمثلا إذا قمت الآن بتحديد أي كلمة، جملة أو فقرة في هذه التدوينة ستجد أن الخلفة تصبح سوداء عوض الخلفية الزرقاء الإفتراضية, للحصول على هذا فقط عليك إضافة المحدد ::selection إلى ملف تنسيقات CSS للقالب المفعل وتطبق التنسيقات التي تفضلها، كهذا المثال:

::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
::selection {
background-color: #2e2f33;
color: #fff;
}

طبعا، بإمكانك تغيير الكود السداسي العشري للخلفية وللون الخط لجعله يتناسب مع التنسيقات العامة لموقعك.

المحدد ::selection يدعم color, background, background-color و text-shadow. أما background-image فيتم تجاهلها. هو مدعوم من طرف IE9+, Opera, Google Chrome y Safari. والمحدد الآخر ::-moz-selection هو الذي يدعمه Firefox.

يمكنك أيضا تطبيق هذا التنسيق فقط على أماكن معينة من الموقع، فمثلا لتطبقه فقط على الفقرات يمكنك جعله هكذا:

p ::-moz-selection {
background-color: #2e2f33;
color: #fff;
}
p ::selection {
background-color: #2e2f33;
color: #fff;
}

هل أعجبك شرح اليوم؟ هل ستطبقه على موقعك؟
لا تبخل علينا برأيك فهو يهمنا.

يرجى ترك هذا الحقل فارغا

قم بالتسجيل على قائمتي البريدية لكي تكون من الأوائل في الحصول على تدوينات وشروحات حصرية

الإسم

البريد الالكتروني *

أنا لا أرسل أبدا البريد المزعج! اقرأ سياسة الخصوصية لمزيد من المعلومات.

افحص البريد الوارد أو مجلد (غير هام) للعثور على رسالة تأكيد الاشتراك.