مظهر نموذج HTML يمكن تحسنت كثيرا مع CSS:
التصميم حقول الإدخال
استخدام width الخاصية لتحديد عرض حقل الإدخال:
على سبيل المثال ينطبق أعلاه على كافة <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 الملكية في منطقتنا CSS3 مربع تحجيم الفصل. |
|---|
تحدها المدخلات
استخدام border الملكية لتغيير حجم الحدود، واللون، واستخدام border-radius الملكية لإضافة تدوير زوايا:
إذا كنت تريد فقط الحد السفلي، استخدم border-bottom الملكية:
المدخلات الملونة
استخدام background-color خاصية لإضافة لون الخلفية للمدخلات، و color الملكية لتغيير لون النص:
المدخلات المركزة
افتراضيا، وبعض المتصفحات إضافة مخطط أزرق حول المدخلات عندما يحصل التركيز (النقر على). يمكنك إزالة هذا السلوك عن طريق إضافة outline: none; لإدخال.
استخدام :focus محدد أن تفعل شيئا مع حقل الإدخال عندما يحصل التركيز:
المدخلات مع رمز / صورة
إذا كنت تريد رمز داخل المدخلات، واستخدام 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;
} انها محاولة لنفسك » الرسوم المتحركة إدخال بحث
في هذا المثال نستخدم CSS3 transition الملكية لتحريك عرض إدخال البحث عندما يحصل التركيز. سوف تتعلم المزيد عن transition الملكية في وقت لاحق، لدينا في CSS3 التحولات الفصل.
مثال
input[type=text] {
-webkit-transition: width 0.4s
ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
} انها محاولة لنفسك » التصميم تيكستارياس
نصيحة: استخدم resize الملكية لمنع تيكستارياس من أن حجمها (تعطيل "المختطف" في الزاوية اليمنى السفلى):
مثال
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 دروس .