الفرق بين المراجعتين ل"CSS/:invalid"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
سطر 16: | سطر 16: | ||
هذا المثال يُمثِّل نموذجًا تُشير ألوانه إلى حالة التحقق من صحة محتوياته، إذ إنَّ اللون الأخضر يعني أنَّ المدخلات سليمة، واللون الأحمر يعني أنها عكس ذلك:<syntaxhighlight lang="html"> | هذا المثال يُمثِّل نموذجًا تُشير ألوانه إلى حالة التحقق من صحة محتوياته، إذ إنَّ اللون الأخضر يعني أنَّ المدخلات سليمة، واللون الأحمر يعني أنها عكس ذلك:<syntaxhighlight lang="html"> | ||
<form> | <form> | ||
− | <label for="url_input"> | + | <label for="url_input">أدخل الرابط:</label> |
<input type="url" id="url_input"> | <input type="url" id="url_input"> | ||
<br> | <br> | ||
− | <label for="email_input"> | + | <label for="email_input">أدخل عنوان البريد الإلكتروني:</label> |
<input type="email" id="email_input" required> | <input type="email" id="email_input" required> | ||
</form> | </form> |
مراجعة 16:03، 3 أكتوبر 2018
الصنف الزائف :invalid
في CSS (أي pseudo-class) يُمثِّل أيّة عناصر <input>
أو <form>
التي فشل التحقق من صحة محتوياتها.
input:invalid {
background-color: pink;
}
هذا المُحدِّد مفيد للإشارة إلى الحقول التي فيها أخطاء كي ينتبه المستخدم إليها.
لاحظ أنَّه إذا كان أحد عناصر مجموعة أزرار الانتقاء (أي عناصر radio التي لها نفس القيمة للخاصية name
) قد ضُبِطَت عليه الخاصية required
، فالصنف الزائف :invalid
سيُطبَّق على جميع العناصر إذا لم يختار المستخدم أحدها.
الشكل العام لهذا المحدد:
:invalid
أمثلة
هذا المثال يُمثِّل نموذجًا تُشير ألوانه إلى حالة التحقق من صحة محتوياته، إذ إنَّ اللون الأخضر يعني أنَّ المدخلات سليمة، واللون الأحمر يعني أنها عكس ذلك:
<form>
<label for="url_input">أدخل الرابط:</label>
<input type="url" id="url_input">
<br>
<label for="email_input">أدخل عنوان البريد الإلكتروني:</label>
<input type="email" id="email_input" required>
</form>
شيفرة CSS:
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #C00000;
}
دعم المتصفحات
الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
الدعم الأساسي (<input>) | 10.0 | 4.0 | 10 | 10.0 | 5.0 |
<form> | مدعومة | 13 | غير مدعومة | مدعومة | ؟ |
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.
- مسودة Selectors Level 4.