CSS/:invalid

الصنف الزائف ‎: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.