مربع الإدخال هو مكون لا غنى عنه لصفحات الويب ، ولكن كل متصفح يحتوي على أنماط عرض مختلفة من مربعات الإدخال.
على سبيل المثال:
الصورة أعلاه هي مربع الإدخال الذي يأتي مع متصفح Google Chrome و IE ، والأناقة غير مرضية ، لذلك سوف يكتب معظمهم الأنماط بأنفسهم.
هنا نمط مربع نص بسيط
إدخال {الحدود: 1px Solid #CCC ؛ الحشو: 7px 0px ؛ الحدود الحدودية: 3px ؛ / *سمة CSS3 IE لا تدعم */ padding-left: 5px ؛ } صورة التكاثر:
معنى السمة النمط:
الحدود: 1px الصلبة #CCC ؛ /*اضبط حدود مربع الإدخال واللون والحجم والخطوط المنقطة الصلبة لخط الحافة*/
الحشو: 7px 0px ؛ /* اضبط ارتفاع مربع الإدخال ، يمكنك أيضًا استخدام الارتفاع ، ولكن إذا كنت تستخدم الارتفاع ، فسيتم وضع مؤشر مربع الإدخال في الأعلى ، ويجب ضبط أنماط أخرى لإصلاحه ، وقد لا يكون متوافقًا.
الحدود الحدودية: 3px ؛ / *حجر الممتلكات داخل CSS3 ، أي لا يدعم */
حشو اليسار: 5 بكسل ؛ /*دع الإعلان يكون 5 بكسل بعيدًا عن اليسار ، وفي البداية يتم توصيل المؤشر بحافة مربع الإدخال على اليسار*/
في الأساس ، يتم استخدام الأنماط المذكورة أعلاه بشكل أكثر شيوعًا في الوقت الحاضر ، ثم بعض الإعدادات الأخرى من المدخلات
على سبيل المثال: العناية النائبة
هذه الخاصية لها تأثير نص موجه في مربع الإدخال. خاصية CSS3 لا تدعم أي
انقر فوق الإدخال لتوهج التأثير الخاص:
إدخال {الحدود: 1px Solid #CCC ؛ الحشو: 7px 0px ؛ الحدود الحدودية: 3px ؛ حشو اليسار: 5 بكسل ؛ -webkit-box-shadow: inset 0 1px 1px rgba (0،0،0 ، .075) ؛ box-shadow: inset 0 1px 1px rgba (0،0،0 ، .075) ؛ -Webkit-transition: Color-Color Ease-in-out.15s ، -webkit-box-shadow Ease-In.15s ؛ -الرانس: سهولة في الحدود. الانتقال: الإدخال: FOCUS {border-color: #66Afe9 ؛ الخطوط العريضة: 0 ؛ -webkit-box-shadow: inset 0 1px 1px rgba (0،0،0 ، .075) ، 0 0 8px rgba (102،175،233 ، .6) ؛ Box-Shadow: Inset 0 1px 1px RGBA (0،0،0 ، .075) ، 0 0 8px RGBA (102،175،233 ، .6)} صورة التكاثر: