الصفحة الرئيسية
تحميل الكود
تغيير الألوان
تغيير العرض
تغيير حجم العرض
تشغيل الكود
<!DOCTYPE html> <html> <head> <style> input[type=text] { box-sizing: border-box; width: 140px; border: 2px solid gray; border-radius: 6px; background: white; padding: 12px 15px 12px 45px; background-image: url('/tutorials/css/forms/search-icon.png'); background-position: 12px 11px; background-size: 20px 20px; background-repeat: no-repeat; outline: none; transition: 0.5s; } input[type=text]:focus { width: 100%; } </style> </head> <body> <h2>Animated Search Input</h2> <form> <input type="text" placeholder="Search .."> </form> </body> </html>