كيفية تغيير لون العنصر النائب باستخدام CSS

Kyfyt Tghyyr Lwn Al Nsr Alnayb Bastkhdam Css



يحدد العنصر النائب المدخلات المتوقعة من المستخدم من خلال إعطاء تلميحات أو أوصاف. تختفي معظم التلميحات والأوصاف عندما تحدد شيئًا ما في حقل الإدخال. افتراضيًا ، يكون لون العنصر النائب للإدخال رماديًا ؛ ومع ذلك ، في بعض الحالات ، من المهم تعديل لون العنصر النائب للإدخال لزيادة وضوحه.

في هذا الدليل ، سنشرح طرقًا مختلفة لتغيير لون العنصر النائب للإدخال باستخدام 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.