كيف TO - نموذج بحث متحرك
تعرف على كيفية إنشاء نموذج بحث متحرك باستخدام CSS.
كيفية إنشاء نموذج بحث متحرك
انقر فوق حقل الإدخال:
الخطوة 1) أضف HTML:
مثال
<input type="text" name="search" placeholder="Search..">
الخطوة 2) أضف CSS:
مثال
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* When the input field gets
focus, change its width to 100% */
input[type=text]:focus {
width: 100%;
}
نصيحة: انتقل إلى البرنامج التعليمي لنموذج HTML الخاص بنا لمعرفة المزيد حول نماذج HTML.
انتقل إلى البرنامج التعليمي لنماذج CSS الخاصة بنا لمعرفة المزيد حول كيفية تصميم نماذج HTML.