نماذج CSS
يمكن تحسين مظهر نموذج HTML بشكل كبير باستخدام CSS:
مجالات إدخال التصميم
استخدم widthالخاصية لتحديد عرض حقل الإدخال:
مثال
input
{
width: 100%;
}
ينطبق المثال أعلاه على جميع عناصر <input>. إذا كنت تريد فقط تصميم نوع إدخال معين ، فيمكنك استخدام محددات السمات:
input[type=text]- سيحدد الحقول النصية فقطinput[type=password]- سيختار فقط حقول كلمة المرورinput[type=number]- سيحدد فقط حقول الأرقام- إلخ..
مدخلات مبطنة
استخدم paddingالخاصية لإضافة مساحة داخل حقل النص.
نصيحة: عندما يكون لديك العديد من المدخلات بعد بعضها البعض ، فقد ترغب أيضًا في إضافة بعضها margin، لإضافة مساحة أكبر خارجها:
مثال
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
لاحظ أننا قمنا بتعيين box-sizingالخاصية إلى
border-box. يؤدي هذا إلى التأكد من تضمين المساحة المتروكة والحدود في النهاية في إجمالي عرض وارتفاع العناصر.
اقرأ المزيد عن box-sizingالخاصية في فصل CSS Box Sizing .
المدخلات ذات الحدود
استخدم borderالخاصية لتغيير حجم الحدود ولونها ، واستخدم border-radiusالخاصية لإضافة زوايا مستديرة:
مثال
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
إذا كنت تريد فقط الحد السفلي ، فاستخدم border-bottomالخاصية:
مثال
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
المدخلات الملونة
استخدم background-colorالخاصية لإضافة لون خلفية إلى الإدخال ، colorوخاصية تغيير لون النص:
مثال
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
المدخلات المركزة
بشكل افتراضي ، ستضيف بعض المتصفحات مخططًا أزرق حول الإدخال عندما يتم التركيز عليه (يتم النقر عليه). يمكنك إزالة هذا السلوك عن طريق الإضافة outline: none;إلى الإدخال.
استخدم :focusالمحدد للقيام بشيء ما في حقل الإدخال عندما يتم التركيز عليه:
مثال
input[type=text]:focus
{
background-color: lightblue;
}
مثال
input[type=text]:focus
{
border: 3px solid #555;
}
الإدخال مع رمز / صورة
إذا كنت تريد رمزًا داخل الإدخال ، فاستخدم background-imageالخاصية وضعها مع background-positionالخاصية. لاحظ أيضًا أننا أضفنا حشوة يسرى كبيرة لحجز مساحة الرمز:
مثال
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
مدخلات البحث المتحركة
في هذا المثال ، نستخدم transitionخاصية CSS لتحريك عرض إدخال البحث عندما يتم التركيز عليه. سوف تتعلم المزيد عن
transitionالخاصية لاحقًا ، في فصل انتقالات CSS .
مثال
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
تصميم Textareas
نصيحة: استخدم resizeالخاصية لمنع تغيير حجم Textareas (قم بتعطيل "grabber" في الركن الأيمن السفلي):
مثال
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
قوائم تحديد الأنماط
مثال
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
أزرار إدخال التصميم
مثال
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
لمزيد من المعلومات حول كيفية تصميم الأزرار باستخدام CSS ، اقرأ البرنامج التعليمي الخاص بأزرار CSS .
نموذج الاستجابة
قم بتغيير حجم نافذة المتصفح لرؤية التأثير. عندما يكون عرض الشاشة أقل من 600 بكسل ، اجعل العمودين مكدسين فوق بعضهما البعض بدلاً من بعضهما البعض.
متقدم: يستخدم المثال التالي استعلامات الوسائط لإنشاء نموذج سريع الاستجابة. سوف تتعلم المزيد عن هذا في فصل لاحق.