كيفية إنشاء: مربع بحث متحرك

تعلم كيفية استخدام CSS لإنشاء استمارة بحث متحركة.

انقر على حقل الإدخال

كيفية إنشاء مربع البحث المتحرك

الخطوة الأولى - إضافة HTML:

<إعداد نوع = "text" الاسم = "البحث" مكاناً محجوزاً = "البحث...">

الخطوة الثانية - إضافة CSS:

إعداد [نوع = text] {
  عرض: 130 بكسل;
  -webkit-انتقال: عرض 0.4 ثانية سهولة الدخول والخروج;
  انتقال: عرض 0.4 ثانية سهولة الدخول والخروج;
}
/* عند تحقيق حقل الإدخال التركيز، قم بتغيير عرضه إلى 100% */
إعداد [نوع = text]:تركيز {
  عرض: 100%;
}

جربها بنفسك

الصفحات ذات الصلة

دليل:نموذج HTML

دليل:نموذج CSS