إليك طريقة سريعة وبسيطة، لإضافة Icons لنموذج بريدي
الصفحة مجربة على: Chrome, Safari, Opera, Firefox و IE7
بناء نموذج بريدي:
<p> <label>username</label> <input type='text' name='username' size='30' /> </p> <p> <label>password</label> <input type='password' name='password' size='30' /> </p>
إضافة Icon لكل حقل:
form input[type=text] { background: url(/images/user.png) no-repeat } form input[type=password] { background: url(/images/key.png) no-repeat }
ثم إزاحة الكلمات عن Icon بمقدار معين:
form input { text-indent: 1.2em; }
يمكن أيضا إضافة Class لكل حقل وعدم استعمال Attribute Selectors إن رغبت بإضافة حقول أخرى لا يوفرها Input Type
nice l’ami ! ça nous a tous manqué tes astuces.
مشكور أخي على النموذج…
تم جمع النموذجين الأخيرين و تحصلنا على نموذج رائع.
تحياتي…
جميل جدا الله يفتح عليك والله , انا متابع لك من زمن لكنى اول مرة اعمل تعليق . بالتوفيق وفى انتظار المزيد يامبدع
حركة أخرى رائعة ليصبح النموذج جميلاً، شكراً لك
طريقة جميلة و معلومة مفيدة.
شكراً لك.
حركه رائعه
لكن ماهذا المتصفح الذي تستخدمه ؟
حركة جميلة جدا اعجبنى كثير اختيار و تناسق تلك الالوان الرائع …… مبدع
فعلاً طريقة سهلة في وضع الأيقونات
أعجبتني صراحة لانها بسيطة وتؤدي الغرض في نفس الوقت
السلام عليكم و رحمةالله تعالى و بركاته
حركة جميلة جدا كنت ابحث من قبل :)
بالتوفيق
رائع كود نظيف وبسيط ومختصر ..
استفدت من خاصية الـ text-indent حيث اني كنت استخدمها في استخدامات اخرى
ولإزاحة النص عن الايقونة كنت استخدم الـ padding ..
افدتني بهذه الاضافة “كالعادة”
—– اضافة :
دائما استخدمها وتعجبني جدا
تقديري لمجهودك
طريقة جميلة ….
شكرا لك اخي العزيز