التعليق: يمكن لـ CSS الفريدة الفريدة لـ WebKit التحكم في نمط النص. مع تأثيرات الرسوم المتحركة والفئة الزائفة من CSS3 ، يمكننا بسهولة إنشاء مربع إدخال الرسوم المتحركة ، وهو مناسب جدًا لتسجيل الدخول إلى النظام ، والبحث ، وما إلى ذلك ، إذا كنت مهتمًا ، فيمكنك الرجوع إلى المقالة التالية أو مساعدتك.
لم أكتب مقالة تقنية لفترة طويلة. لقد كنت أستخدم WebKit كحامل مؤخرًا. بالطبع ، أحتاج إلى استخدام HTML5 و CSS3 بكميات كبيرة ، مما لا يقلل من الكثير من JS فحسب ، بل يضمن أيضًا أكثر سلاسة.عند تحديد مربع الحوار ، سيصبح نص المطالبة أخف ويختفي بعد الإدخال. الممارسة الحالية هي إضافة تسمية خلف علامة الإدخال. استخدم التحكم في JS.
بعد ظهور HTML5 ، لدينا نهج أفضل.
<type type = "text" placeholder = "اسم المستخدم أو عنوان البريد الإلكتروني"/>
نرى أن هناك علامة نائبة يمكن استخدامها كمطالبة نصية للمستخدم. هذا مريح للغاية. ولكن من أجل تحقيق أفضل الكمال ، نحتاج إلى تخفيف النص بعد تحديده ، أو تعديل نمط الملف الموجه. ماذا يجب أن نفعل؟
إدخال ::-WebKit-Input-placeholder {
اللون: #999 ؛
-webkit-transition: color.5s ؛
}
الإدخال: Focus ::-WebKit-Input-placeholder ، الإدخال: Hover ::-WebKit-Input-placeholder {
اللون: #C2C2C2 ؛
-بكيت ترانس: color.5s ؛
}
-يمكن لـ WebKit-Input-Placeholder ، وهو CSS فريد من نوعه لـ WebKit ، التحكم في نمط النص في الداخل. مع تأثيرات الرسوم المتحركة والفئات الزائفة من CSS3 ، يمكننا بسهولة إنشاء مربع إدخال الرسوم المتحركة ، وهو مناسب جدًا لتسجيل الدخول والبحث والمواقع الأخرى. بالطبع ، لن تعمل هذه الطريقة حتى تكون متوافقة مع IE6. ومع ذلك ، يدعم IE9 أيضًا علامة العنصر النائب ، ولكن لا يمكن تعديل لونه.
لذا ، ماذا علي أن أفعل إذا لم يتم دعمه؟ يمكنك ببساطة استخدام jQuery للمساعدة ، لذلك ليس ضمن نطاق هذه المقالة.
أعط عرضًا تجريبيًا ، ويجب أن يكون العنوان التجريبي في متصفح WebKit لمعرفة التأثير الكامل. أليست مريحة للغاية؟