في هذا الدليل ، سنشرح طرقًا مختلفة لتغيير لون العنصر النائب للإدخال باستخدام CSS.
الطريقة الأولى: تغيير لون العنصر النائب باستخدام محدد ':: placeholder'
CSS ' :: نائب 'selector' لتحديد عناصر النموذج مع نص العنصر النائب. يمكن استخدامه لتغيير نص العنصر النائب. بالإضافة إلى ذلك ، يمكنك استخدام هذا المحدد لتعديل لون العنصر النائب للإدخال.
بناء الجملة
بناء جملة :: placeholder كالتالي:
:: نائب {
اللون : القيمة
}
في مكان ' القيمة '، يمكنك ضبط لون العنصر النائب للإدخال وفقًا لاختيارنا.
دعنا ننتقل إلى المثال العملي ، حيث سنغير لون العنصر النائب للإدخال.
مثال
لتغيير لون العنصر النائب للإدخال ، أولاً ، سننشئ عنصر إدخال باستخدام علامة ونحدد نوع الإدخال كـ ' نص '. بعد ذلك ، قم بتعيين نص العنصر النائب للإدخال على أنه ' يدخل اسمك '.
لغة البرمجة
< هيئة >< الإدخال يكتب = 'نص' نائب = 'أدخل أسمك' >
< / هيئة >
ناتج الكود المعطى هو:
يظهر اللون الافتراضي للعنصر النائب للإدخال في الصورة المذكورة أعلاه.
الآن ، ننتقل إلى CSS ونستخدم ' :: نائب 'للوصول إلى نص العنصر النائب للإدخال وتعيين لونه على أنه' RGB (17 ، 0 ، 255) '.
CSS
:: نائب {اللون : RGB ( 17 و 0 و 255 ) ؛
}
كما ترى ، يتغير لون العنصر النائب للإدخال المضاف إلى اللون الأزرق:
هناك طريقة أخرى لتغيير لون العنصر النائب للإدخال. دعونا التحقق من ذلك.
الطريقة 2: تغيير لون العنصر النائب للإدخال باستخدام ':: - webkit-input-placeholder' عنصر فئة Pseudo-class
' :: - webkit-input-placeholder يمثل عنصر فئة pseudo-class بشكل أساسي نص العنصر النائب لعنصر النموذج. يمكن استخدامه من قبل مصممي ومطوري السمات لتخصيص مظهر نص العنصر النائب. بالإضافة إلى ذلك ، باستخدام العنصر المحدد ، يمكن للمستخدم تعديل لون العنصر النائب للإدخال.
بناء الجملة
يُعطى بناء جملة :: - webkit-input-placeholder على النحو التالي:
:: -webkit-input-placeholder {اللون : القيمة
}
في مكان ' القيمة '، يمكنك تعيين لون العنصر النائب للإدخال.
دعنا ننتقل إلى المثال لفهم عنصر الفئة الزائفة الذي تمت مناقشته أعلاه.
مثال
في ملف CSS ، استخدم ' :: - webkit-input-placeholder 'عنصر فئة زائفة وتعيين قيمة اللون كـ' RGB (255 ، 13 ، 13) ':
:::: -webkit-input-placeholder {اللون : RGB ( 255 و 13 و 13 ) ؛
}
انتاج |
هنا ، يمكنك أن ترى أن اللون الافتراضي للعنصر النائب للإدخال قد تغير.
استنتاج
يتم تغيير لون العنصر النائب للإدخال باستخدام ' :: نائب 'المحدد و' :: - webkit-input-placeholder 'عنصر من فئة زائفة. باستخدام هذا ، يمكنك تغيير اللون الافتراضي للعنصر النائب للإدخال. في هذه المقالة ، أوضحنا الإجراء المتعلق بتغيير لون العنصر النائب للإدخال باستخدام خصائص CSS.