تصميم العنصر النائب CSS. كيفية تغيير لون نص تلميح الأداة في عنصر نائب باستخدام أنماط CSS؟ المهمة: اصنع نمط CSS الخاص بك للعنصر النائب

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

لذا، يمكن تغيير لون نص العنصر النائب باستخدام، على سبيل المثال، مجموعة قواعد CSS التالية:

::-webkit-input-placeholder (اللون : #c0392b ;) ::-moz-placeholder ( اللون : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( اللون : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( color : #c0392b ;)

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

بالإضافة إلى ذلك، ليست جميعها مدعومة خصائص المغلق. فيما يلي قائمة بالخصائص المدعومة بالضبط:

الخط (وما يتصل به)
الخلفية (وما يتصل بها)
لون
تباعد الكلمات
تباعد الحروف
زخرفة النص
محاذاة عمودية
تحويل النص
ارتفاع خط
المسافة البادئة النص
تجاوز النص
العتامة

ويحدث أيضًا أن نص العنصر النائب "يوسع" عرض عنصر الإدخال أو منطقة النص (حالة شائعة لـ أجهزة محمولة). وفي الوقت نفسه، يتم قطعه تلقائيًا بشكل قبيح.

ستساعدنا خاصية CSS مثل text-overflow: ellipsis في حل هذه المشكلة، مما سيضيف قطعًا جماليًا إلى المنطقة التي تم اقتصاصها من العنصر النائب. في الأنماط نكتب مثل هذا:

الإدخال [العنصر النائب] (تجاوز النص: علامات الحذف؛) الإدخال ::-moz-العنصر النائب (تجاوز النص: علامات الحذف؛) الإدخال: -moz-العنصر النائب (تجاوز النص: علامات الحذف؛) الإدخال: -ms-input-placeholder ( تجاوز النص: علامة القطع ;)

لإضافة المزيد من الجماليات إلى العناصر النائبة لدينا، من الممكن إضافة تأثير إخفائها عندما يتلقى العنصر المقابل التركيز.

بعض الأمثلة على هذا الاختباء باستخدام عناصر الرسوم المتحركة:

/* تغيير سلس في شفافية العنصر النائب عند التركيز عليه */.input ::-webkit-input-placeholder ( العتامة : 1 ; الانتقال : العتامة 0.3 ثانية سهولة ;) .input ::-moz-placeholder ( العتامة : 1 ; الانتقال : العتامة 0.3 ثانية سهولة ;).input :-moz- العنصر النائب (العتامة: 1؛ الانتقال: العتامة 0.3 ثانية سهولة؛). الإدخال: -ms-input-placeholder (العتامة: 1؛ الانتقال: العتامة 0.3 ثانية سهولة؛). الإدخال (العتامة: 0؛ الانتقال: العتامة 0.3 ثانية سهولة؛ ) .input :focus::-moz-placeholder ( العتامة : 0 ; الانتقال : العتامة 0.3 ثانية سهولة ;) .input : التركيز: -moz-placeholder ( العتامة : 0 ; الانتقال : العتامة 0.3 ثانية سهولة ; :-ms -عنصر نائب للإدخال (التعتيم: 0؛ الانتقال: التعتيم 0.3 ثانية سهولة؛) /* قم بإزاحة العنصر النائب إلى اليمين عند التركيز عليه */.input ::-webkit-input-placeholder ( مسافة بادئة للنص : 0px ؛ انتقال : مسافة بادئة للنص 0.3 ثانية سهولة ؛) .input :: -moz-placeholder ( مسافة بادئة للنص : 0px ؛ انتقال : مسافة بادئة للنص 0.3 ثانية سهولة ؛).الإدخال: -moz-placeholder (مسافة بادئة للنص: 0px ؛ الانتقال: مسافة بادئة للنص 0.3 ثانية بسهولة؛). الإدخال: -ms-input-placeholder (مسافة بادئة للنص: 0px ؛ انتقال: مسافة بادئة للنص 0.3 ثانية بسهولة) ؛).مدخل :focus::-webkit-input-placeholder(مسافة بادئة للنص: 500 بكسل؛ انتقال: مسافة بادئة للنص 0.3 ثانية سهولة؛).input :focus::-moz-placeholder (مسافة بادئة للنص: 500 بكسل؛ انتقال: مسافة بادئة للنص 0.3 ثانية سهولة؛).input :focus:- moz-placeholder (مسافة بادئة للنص: 500 بكسل؛ انتقال: مسافة بادئة للنص 0.3 ثانية سهولة؛) .input :التركيز:-ms-input-placeholder (مسافة بادئة للنص: 500 بكسل؛ انتقال: مسافة بادئة للنص 0.3 ثانية سهولة ;) /* قم بإزاحة العنصر النائب للأسفل عند التركيز عليه */.input ::-webkit-input-placeholder (ارتفاع الخط: 20px ؛ الانتقال: ارتفاع الخط 0.5 ثانية بسهولة ؛) .input ::-moz-placeholder (ارتفاع الخط: 20px ؛ الانتقال: ارتفاع الخط 0.5 ثانية سهولة) ؛).الإدخال: -moz-placeholder (ارتفاع الخط: 20 بكسل ؛ الانتقال: ارتفاع الخط 0.5 ثانية سهولة ؛). الإدخال: -ms-input-placeholder (ارتفاع الخط: 20 بكسل ؛ الانتقال: ارتفاع الخط 0.5 ثانية سهولة). ؛).مدخل :focus::-webkit-input-placeholder( ارتفاع الخط : 100 بكسل ؛ الانتقال : ارتفاع الخط 0.5 ثانية سهولة ؛). الإدخال : التركيز:: -moz-placeholder ( ارتفاع الخط : 100 بكسل ؛ الانتقال : ارتفاع الخط 0.5 ثانية سهولة ؛). الإدخال : التركيز: - moz-placeholder (ارتفاع الخط: 100 بكسل؛ الانتقال: ارتفاع الخط 0.5 ثانية سهولة؛). الإدخال: التركيز: -ms-input-placeholder (ارتفاع الخط: 100 بكسل؛ الانتقال: ارتفاع الخط 0.5 ثانية سهولة ;)

دعونا ننتهي هنا.

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

في الإخراج نحصل على الحقل التالي:

لنتخيل الآن أننا بحاجة إلى تصميم العنصر النائب، ولهذا نحتاج إلى كتابة مجموعة من القواعد في CSS:

::-webkit-input-placeholder ( اللون: #c1c1c1; ) ::-moz-placeholder ( اللون: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( اللون: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )

نحن نحصل:

لا يمكننا تغيير جميع الخصائص، ولكن قائمة بمعظمها التي تدعمها المتصفحات الحديثة مذكورة أدناه:
الخط(أيضا الخصائص ذات الصلة)
خلفية(أيضا الخصائص ذات الصلة)
لون
تباعد الكلمات
تباعد الحروف
زخرفة النص
محاذاة عمودية
تحويل النص
ارتفاع خط
المسافة البادئة النص
تجاوز النص
العتامة

في متصفحات مختلفةتتم كتابة القاعدة بشكل مختلف، ل على الرغم من عدم وجود معيار واحد، إلا أن هذه المجموعة من السجلات لا تزال ذات صلة. في متصفح IE، وكذلك Firefox الإصدار 18، يُنظر إلى العنصر النائب على أنه فئة زائفة، وفي المتصفحات الجديدة Firefox وwebkit وblink يُنظر إليه على أنه عنصر زائف.

تقصير النص في العنصر النائب
في بعض الأحيان، يمكن أن تكون تلميحات الأدوات طويلة جدًا بحيث لا يمكن احتواؤها بالكامل في حقل الإدخال. لهذه الأغراض، يمكنك أيضًا استخدام خصائص إضافية تسمح لك بتقصير نص العنصر النائب في حقل الإدخال.

الإدخال (تجاوز النص: علامة الحذف؛) الإدخال::-moz-placeholder (تجاوز النص:علامة القطع؛) الإدخال:-moz-placeholder (تجاوز النص:علامة الحذف؛) الإدخال:-ms-input-placeholder (تجاوز النص :حذف؛

ونتيجة لذلك، نحصل على حقل إدخال مع عنصر نائب مثل هذا:

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

:التركيز::-webkit-input-placeholder (اللون: شفاف; ) :التركيز::-moz-placeholder (اللون: شفاف;) :التركيز:-moz-placeholder (اللون: شفاف; ) :التركيز:-ms-input -العنصر النائب (اللون: شفاف؛)

نحصل على هذا الإجراء:

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

بشكل سيئ

بخير

التصميم: تغيير لون العنصر النائب CSS

تغيير نمط حقل الإدخال باستخدام العنصر النائب CSS

بشكل سيئ

تأثير العنصر النائب ل

سمة العنصر النائب تعمل فقط مع و ، حتى إذا كانت العلامات الأخرى تحتوي على السمة contenteditable المحددة.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="يمكنك إدخال النص" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="يمكنك إدخال النص" class="raz"></div> <h2>طريقة ذاكرة قديمة تغير قيمة JavaScript</h2> <input onblur="this.value=(this.value=="التركيز="this.value=(this.value==this.title)?" value="بريد إلكتروني" title="بريد إلكتروني"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="بريد إلكتروني" title="بريد إلكتروني" /> <p>العنصر النائب هو عنصر في حقل الإدخال الذي يمكن وضع تلميح الأدوات فيه. عندما يبدأ المستخدم بإدخال البيانات، يختفي النص الداعم حتى لا يتداخل. ولكل متصفح رأيه الخاص حول كيفية عرض هذا العنصر، وفي بعض الأحيان تؤدي الأنماط الافتراضية إلى تعطيل التصميم بأكمله. للسيطرة عليهم، تحتاج إلى استخدام خاص <a href="https://128gb.ru/ar/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">قاعدة CSS</a>العنصر النائب</p> <h2>أين هو العنصر النائب؟</h2> <p>تكمن المشكلة في أن تلميح أداة حقل الإدخال مخفي بأمان في ظل DOM وليس من السهل الوصول إليه. لهذا الغرض، يتم استخدام عنصر نائب خاص غير قياسي:. بمساعدتها يمكنك إدارة خصائص تلميح الأدوات.</p> <p>يبدو تصميم العنصر النائب في CSS كما يلي:</p><p>الإدخال::عنصر نائب (اللون: أحمر؛ العتامة: 1؛ نمط الخط: مائل؛)</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>دعم المتصفح</h2> <p>يتم التعامل مع العنصر النائب CSS بشكل جيد من قبل جميع المتصفحات الحديثة، ولدعم المتصفحات القديمة يمكنك استخدام البادئات التالية:</p> <ul><li>::-webkit-input-placeholder - لمتصفحات webkit (Safari، Chrome، Opera)؛</li> <li>::-moz-placeholder - for <a href="https://128gb.ru/ar/download-software-mozilla-firefox-download-and-install-the-mozilla-firefox-browser-russian-version-on-your-computer.html">متصفحات فايرفوكس</a>الإصدار 19 أعلاه؛</li> <li>:-moz-placeholder - لمتصفح فايرفوكس الأقدم؛</li> <li>:-ms-input-placeholder - for <a href="https://128gb.ru/ar/internet-eksplorer-ne-otobrazit-etu-stranicu-nastroiki-internet-explorer-v.html">متصفح الانترنت</a>أعلاه الإصدار 10.</li> </ul><p>كما ترون، القديمة <a href="https://128gb.ru/ar/ustanovka-plagina-kriptopro-csp-v-brauzere-mozilla-firefox-kripto-pro-ecp.html">متصفحات موزيلا</a>، بالإضافة إلى IE، يعتبرون العنصر النائب فئة زائفة في CSS، وليس عنصرًا زائفًا. دعونا لا نتجادل معهم، بل سنأخذ هذا الجانب بعين الاعتبار عند تصميم حقل الإدخال.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>خيارات التصميم</h2> <p>يمكنك تعيين الخيارات التالية للعنصر النائب الزائف في CSS:</p> <ul><li>الخلفية - تنطبق مجموعة قوالب تلميحات الأدوات على حقل الإدخال بأكمله. لا يمكنك ضبط اللون (لون الخلفية) فحسب، بل يمكنك أيضًا ضبط الصورة (صورة الخلفية).</li> <li>لون النص - اللون؛</li> <li>الشفافية - العتامة.</li> <li>التسطير أو التسطير أو الشطب - زخرفة النص؛</li> <li>الحالة - تحويل النص؛</li> <li><a href="https://128gb.ru/ar/vnutrennii-otstup-v-tablice-html-primenenie-svoistva-border.html">حشوة</a>- الحشو. غير مدعوم من قبل جميع المتصفحات. كما هو الحال مع العناصر المضمنة، يتم تجاهل الحشو العلوي والسفلي.</li> <li>عرض الخط - خصائص مجموعة الخطوط، وارتفاع الخط، والمسافات البادئة المختلفة (مسافة بادئة للنص، وتباعد الحروف، وتباعد الكلمات)؛</li> <li>محاذاة عمودية في خط - محاذاة عمودية؛</li> <li>تقليم النص عندما تفيض الحاوية - تجاوز النص.</li> </ul>.input1::placeholder ( صورة الخلفية: خطي متدرج (ليموني، أزرق)؛ اللون: أبيض؛ ) .input2::placeholder ( زخرفة النص: خط كامل؛ اللون: أرجواني؛ حجم الخط: غامق؛ ) . input3::placeholder (حجم الخط: 16px; تباعد الحروف: 10px; ) .input4::placeholder (الخلفية: بني; اللون: أبيض; تجاوز النص: علامات الحذف;) <h2>في تركيز</h2> <p>افتراضيًا، يختفي تلميح الأداة من حقل الإدخال فقط في حالة إدخال حرف واحد على الأقل فيه. لكن العنصر النائب يسمح لك بتنفيذ الاختفاء فورًا عند التركيز على الميدان. للقيام بذلك، تحتاج إلى دمجها مع الفئة الزائفة:focus.</p><p>الإدخال:التركيز::عنصر نائب (اللون: شفاف؛)</p><p>في بعض المتصفحات، من الممكن تحريك التغييرات في عدد من خصائص العنصر النائب باستخدام بيان النقل.</p><p>الإدخال::عنصر نائب (اللون: أسود؛ انتقال: لون 1S؛) الإدخال:التركيز::عنصر نائب (اللون: أبيض؛)</p><p>في المتصفح <a href="https://128gb.ru/ar/chto-oznachaet-verhnii-pravyi-ugol-stranicy-elementy-upravleniya-na-stranice.html">جوجل كروم</a>عند التركيز على مثل هذا المجال، سيتغير لون التلميح بسلاسة خلال ثانية واحدة.</p> <p>العنصر النائب هو عنصر في حقل الإدخال الذي يمكن وضع تلميح الأدوات فيه. عندما يبدأ المستخدم بإدخال البيانات، يختفي النص الداعم حتى لا يتداخل. ولكل متصفح رأيه الخاص حول كيفية عرض هذا العنصر، وفي بعض الأحيان تؤدي الأنماط الافتراضية إلى تعطيل التصميم بأكمله. لإدارتها، تحتاج إلى استخدام قاعدة نائب خاصة لـ CSS.</p> <h2>أين هو العنصر النائب؟</h2> <p>تكمن المشكلة في أن تلميح أداة حقل الإدخال مخفي بأمان في ظل DOM وليس من السهل الوصول إليه. للقيام بذلك، يتم استخدام عنصر زائف خاص غير قياسي في CSS::placeholder. بمساعدتها يمكنك إدارة خصائص تلميح الأدوات.</p> <p>سوف تكون مهتما:</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>يبدو تصميم العنصر النائب في CSS كما يلي:</p> <p>الإدخال::عنصر نائب (اللون: أحمر؛ العتامة: 1؛ نمط الخط: مائل؛) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>دعم المتصفح</h2> <p>يتم التعامل مع العنصر النائب CSS بشكل جيد من قبل جميع المتصفحات الحديثة، ولدعم المتصفحات القديمة يمكنك استخدام البادئات التالية:</p> <ul><li>::-webkit-input-placeholder - لمتصفحات webkit (Safari، Chrome، Opera)؛</li> <li>::-moz-placeholder - لمتصفحات Firefox أعلاه الإصدار 19؛</li> <li>:-moz-placeholder - لمتصفح فايرفوكس الأقدم؛</li> <li>:-ms-input-placeholder - لبرنامج Internet Explorer أعلاه الإصدار 10.</li> </ul><p>كما ترون، تعتبر متصفحات Mozilla الأقدم، بالإضافة إلى متصفح IE، العنصر النائب فئة زائفة في CSS وليس عنصرًا زائفًا. دعونا لا نتجادل معهم، بل سنأخذ هذا الجانب بعين الاعتبار عند تصميم حقل الإدخال.</p> <p><img src='https://i1.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>خيارات التصميم</h2> <p>يمكنك تعيين الخيارات التالية للعنصر النائب الزائف في CSS:</p> <ul><li>الخلفية - مجموعة من خصائص الخلفية. تنطبق خلفية كتلة التلميح على حقل الإدخال بأكمله. لا يمكنك ضبط اللون (لون الخلفية) فحسب، بل يمكنك أيضًا ضبط الصورة (صورة الخلفية).</li> <li>لون النص - اللون؛</li> <li>الشفافية - العتامة.</li> <li>التسطير أو التسطير أو الشطب - زخرفة النص؛</li> <li>الحالة - تحويل النص؛</li> <li>المسافات البادئة الداخلية - الحشو. غير مدعوم من قبل جميع المتصفحات. كما هو الحال مع العناصر المضمنة، يتم تجاهل الحشو العلوي والسفلي.</li> <li>عرض الخط - خصائص مجموعة الخطوط، وارتفاع الخط، والمسافات البادئة المختلفة (مسافة بادئة للنص، وتباعد الحروف، وتباعد الكلمات)؛</li> <li>محاذاة عمودية في خط - محاذاة عمودية؛</li> <li>تقليم النص عندما تفيض الحاوية - تجاوز النص.</li> </ul><p>Input1::placeholder (صورة الخلفية: تدرج خطي (ليموني، أزرق)؛ اللون: أبيض؛ ) .input2::placeholder (زخرفة النص: خط كامل؛ اللون: أرجواني؛ حجم الخط: غامق؛ ) .input3 ::العنصر النائب (حجم الخط: 16 بكسل؛ تباعد الحروف: 10 بكسل؛) .input4::العنصر النائب (الخلفية: بني؛ اللون: أبيض؛ تجاوز النص: علامات الحذف؛)</p><h2>في تركيز</h2> <p>افتراضيًا، يختفي تلميح الأداة من حقل الإدخال فقط في حالة إدخال حرف واحد على الأقل فيه. لكن العنصر الزائف للعنصر النائب لـ CSS يسمح لك بتنفيذ التلاشي فورًا عند التركيز على الحقل. للقيام بذلك، تحتاج إلى دمجها مع الفئة الزائفة:focus.</p> <p>الإدخال:التركيز::عنصر نائب (اللون: شفاف؛)</p><p>في بعض المتصفحات، من الممكن تحريك التغييرات في عدد من خصائص العنصر النائب باستخدام بيان النقل.</p> <p>الإدخال::عنصر نائب (اللون: أسود؛ الانتقال: اللون 1S؛) الإدخال:التركيز::عنصر نائب (اللون: أبيض؛)</p><p>في <a href="https://128gb.ru/ar/kak-udalit-polnostyu-brauzer-google-chrome-s-kompyutera-kak-udalit.html">متصفح جوجل</a>سوف يتغير لون تلميح أداة Chrome بسلاسة عند التركيز على مثل هذا الحقل خلال ثانية واحدة.</p> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </article> <div class="single-share"> <div class="row align-middle"> <div class="columns small-12 medium-expand"> <div class="single-share__title">أخبر الأصدقاء</div> </div> </div> <div class="single-share-links"> <div class="row"> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--fb"> <div class="row"> <div class="columns"><i class="fa fa-facebook-official single-share-links-item__icon"></i> </div> <div class="columns text-right js-fb-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--vk"> <div class="row"> <div class="columns"><i class="fa fa-vk single-share-links-item__icon"></i> </div> <div class="columns text-right js-vk-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--tw"> <div class="row"> <div class="columns"><i class="fa fa-twitter single-share-links-item__icon"></i> </div> <div id="twitter_sharer" class="columns text-right">تويتر <span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html/&utm_source=share2', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--ok"> <div class="row"> <div class="columns"><i class="fa fa-odnoklassniki single-share-links-item__icon"></i> </div> <div class="columns text-right js-ok-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> </div> </div> </div> <div class="banner-place" data-place="article_under_h1" style="width: 100%;"></div> <div class="prev-next-articles"> <div class="prev-next-articles__item prev-next-articles__item--left"> <i class="fa fa-chevron-left"></i><span>لعبة سامسونج...</span> <a href="https://128gb.ru/ar/kak-ustanovit-yandeks-launcher-po-umolchaniyu-ischez-rabochii-stol-android-ili-ne.html" rel="prev">اختفى سطح مكتب Android أو أن المشغل لا يعمل!</a> </div> <div class="prev-next-articles__item prev-next-articles__item--right"> <i class="fa fa-chevron-right"></i><span>المقالة التالية</span> <a href="https://128gb.ru/ar/sony-pc-companion-ne-rabotaet-xperia-companion-novoe-prilozhenie-na-windows-pc-dlya.html" rel="next">Xperia Companion - تطبيق جديد على أجهزة الكمبيوتر التي تعمل بنظام Windows لتحديث Xperia واستعادته</a> </div> </div> <div class="banner-place" data-place="article_above_similar_articles" style="width: 100%;"></div> <div class="banner-place" data-place="article_above_similar_articles_2" style="width: 100%;"></div> <div class="banner-place" data-place="article_under_social" style="width: 100%;"></div> <div class="banner-place" data-place="fixed_bottom_right" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title text-center">اقرأ أيضا</div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/ar/kakoi-audiopleer-luchshe-dlya-kompyutera-luchshie-muzykalnye-pleery-na.html"> <img width="130" height="85" src="/uploads/73abc6de7b92bfdc0f232fce200559a6.jpg" alt="أفضل مشغلات الموسيقى للأندرويد" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/ar/kakoi-audiopleer-luchshe-dlya-kompyutera-luchshie-muzykalnye-pleery-na.html">أفضل مشغلات الموسيقى للأندرويد</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-13 00:03:49</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/ar/chto-takoe-haby-na-vnedorozhnike-chto-takoe-hab-svitch-i-router-vyglyadit.html"> <img width="130" height="85" src="/uploads/7a29f3c07f20966e89e1b3a8b5bde139.jpg" alt="ما هو المحور والتبديل وجهاز التوجيه؟" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/ar/chto-takoe-haby-na-vnedorozhnike-chto-takoe-hab-svitch-i-router-vyglyadit.html">ما هو المحور والتبديل وجهاز التوجيه؟</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-12 00:04:38</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/ar/json-rasshifrovka-abbreviatury-osnovy-raboty-s-json-chto-takoe-json.html"> <img width="130" height="85" src="/uploads/a25ab8fadd32446d66f87b7ab9f34d96.jpg" alt="فك تشفير الاختصار Json" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/ar/json-rasshifrovka-abbreviatury-osnovy-raboty-s-json-chto-takoe-json.html">فك تشفير الاختصار Json</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-11 00:04:21</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/ar/galereya-izobrazheniya-na-jquery-galereya-izobrazhenii-na-jquery-s.html"> <img width="130" height="85" src="/uploads/e2061ca22c6de4fb892f07c2584a9328.jpg" alt="معرض صور jQuery بتأثير مثير للاهتمام" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/ar/galereya-izobrazheniya-na-jquery-galereya-izobrazhenii-na-jquery-s.html">معرض صور jQuery بتأثير مثير للاهتمام</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-09 00:04:15</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> </div> </div> </div> <div class="columns small-12 medium-4 show-for-medium"> <aside class="sidebar"> <div class="experts-list"> <b><div class="experts-list__title">أحدث المنشورات</div></b><br> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/feff38bed77dc79090027685f0fd5f35.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/otobrazhenie-razmera-papok-v-windows-7-kak-uznat-razmer-papok-na.html" title="كيفية معرفة حجم المجلدات الموجودة على القرص باستخدام PowerShell" class="expert__name">كيفية معرفة حجم المجلدات الموجودة على القرص باستخدام PowerShell</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/solving-problems/">حل المشاكل</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/4817d653c3d16ee7667f7adb92a72cda.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/udalenie-vtoroi-operacionnoi-sistemy-s-kompyutera-ubiraem-vtoruyu-os-windows-iz.html" title="إزالة نظام التشغيل Windows الثاني من قائمة التنزيل كيفية إزالة نظام التشغيل Windows 7 الثاني من جهاز الكمبيوتر الخاص بك" class="expert__name">إزالة نظام التشغيل Windows الثاني من قائمة التنزيل كيفية إزالة نظام التشغيل Windows 7 الثاني من جهاز الكمبيوتر الخاص بك</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/protection/">حماية</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/32316589abc8decf14a4a67462b55e04.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/kak-vklyuchit-vai-fai-na-noutbuke-kak-vklyuchit-vai-fai-na.html" title="كيفية تشغيل Wi-Fi على جهاز كمبيوتر محمول كيفية إعداد جهاز توجيه على جهاز كمبيوتر محمول يعمل بنظام Windows 8" class="expert__name">كيفية تشغيل Wi-Fi على جهاز كمبيوتر محمول كيفية إعداد جهاز توجيه على جهاز كمبيوتر محمول يعمل بنظام Windows 8</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/peripherals/">محيط</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/8432a7bfcdb706d1a86b782c05f75e83.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/virus-zashchitil-fleshku-ot-zapisi-chto-delat-kak-snyat-zashchitu-s-fleshki-ot.html" title="كيفية إزالة الحماية ضد الكتابة من محرك أقراص فلاش" class="expert__name">كيفية إزالة الحماية ضد الكتابة من محرك أقراص فلاش</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/boot-disk/">قرص التشغيل</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/e0d1cf337660c5106e756570c9b62ac3.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/programmnyi-kompleks-poligon-tehnicheskii-plan-poligon-pro-tehplan.html" title="Polygon Pro: المخطط الفني لإحداثيات المبنى للكائنات المحددة من MapInfo" class="expert__name">Polygon Pro: المخطط الفني لإحداثيات المبنى للكائنات المحددة من MapInfo</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/the-choice-of-operating-system/">اختيار نظام التشغيل</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/53d98bc9af6ce255f05b4ec31952bfdf.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/testy-gtx-280-polzovatelyami-posle-pokupki-kompyuternyi-resurs-u-sm-osnovnye.html" title="موارد الكمبيوتر U SM" class="expert__name">موارد الكمبيوتر U SM</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/useful-tips/">نصائح مفيدة</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/e3be64a997d74ba9a48f5b0195e074e5.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/udalenie-uchetnoi-zapisi-polzovatelya-windows-7-poluchenie-administratorskih-prav.html" title="الحصول على حقوق المسؤول" class="expert__name">الحصول على حقوق المسؤول</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/boot-disk/">قرص التشغيل</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/56fcf10656e3593988adfef2c6a300fd.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/telefon-nokia-lyumiya-k-zavodskim-nastroikam-uchimsya-delat-sbros-nastroek-na.html" title="تعلم كيفية إعادة ضبط الإعدادات على"нокиа люмия"" class="expert__name">تعرف على كيفية إعادة ضبط الإعدادات على Nokia Lumia</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/installing-multiple-os/">تثبيت أنظمة تشغيل متعددة</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/9276f89bd5be32238287b52fc363a64e.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/kakim-antivirusom-luchshe-proskanirovat-fleshku-kak-proverit-na-virusy-fleshku.html" title="كيفية التحقق من محرك أقراص فلاش بحثا عن الفيروسات؟" class="expert__name">كيفية التحقق من محرك أقراص فلاش بحثا عن الفيروسات؟</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/peripherals/">محيط</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/f7802de41a637a687b0e9e72b5f2a052.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/ar/otkrytie-keisov-v-vorld-of-tank.html" title="فتح الحالات في عالم الدبابات" class="expert__name">فتح الحالات في عالم الدبابات</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/ar/category/installation-and-configuration/">التثبيت والتكوين</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> </div> <div> <div id="komojy1" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </main> </div> </div> </div> <footer class="footer"> <div class="footer-menu"> <a href="https://128gb.ru/ar/feedback.html" title="" class="footer-menu__item">جهات الاتصال</a> <a href="" title="" class="footer-menu__item">حول المشروع</a> <a href="https://128gb.ru/ar/feedback.html" title="" class="footer-menu__item">دعاية</a> </div> <div class="footer-bottom"> <div class="footer-bottom__wrapper"> <div class="footer-bottom__block"> <div class="footer__logo"> </div> <div class="footer__copyright" style="max-width:500px;">© 2024. مساعدة الكمبيوتر <br> <small></small> </div> </div> <div class="footer-submenu"> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/ar/category/useful-tips/">نصائح مفيدة</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/ar/category/solving-problems/">حل المشاكل</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/ar/category/iron/">حديد</a> </div> <div class="footer-submenu__column"> </div> </div> <div class="footer-social"> </div> </div> </div> </footer> <script type="text/javascript" src="//vk.com/js/api/openapi.js?124"></script> <script> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> <script type="text/javascript" src="https://128gb.ru/wp-content/themes/womensovet/assets/js/app-20170207142519.js"> </script> <script type="text/javascript"> /*<![CDATA[*/ window.hashName = window.location.hash; if (window.hashName) { $(window).load(function () { $('html, body').animate({ scrollTop: $(window.hashName).offset().top} , 2000); return false; } ); } jQuery(function($) { $(document).foundation(); APP.init(); getVkSharedCount(); getFaceBookShareCount(); getOKShareCount(); } ); /*]]>*/ </script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <div class="li-stat"> </div> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><br> <br> </body> </html>